バニラJavaScriptにてfetch APIを用いてHTTPリクエストを行う方法

あるサイトのソースコードを拝見しているとバニラJavaScriptにて他ページのHTMLを取得するためにfetch~thenという構文が使われていた。このようなHTTPリクエストを行う際、いつもだとjQueryのAjaxを利用しているが、バニラJavaScriptでも対応できるようにしておきたいので利用方法をメモ。

利用方法

ソースコード

//GET送信する場合
const url = `https://zipcloud.ibsnet.co.jp/api/search?zipcode=1050003`;
fetch(url)
    .then((data) => data.text())
    .then((res) => {
        console.log(res);
    })
    .catch(e => {
        //エラー発生時
        console.error(e.message)
    }
);

//POST送信する場合
const url = `https://zipcloud.ibsnet.co.jp/api/search`;
const params = new URLSearchParams();
params.append(`zipcode`, `1050003`);
fetch(url, {
    method: `POST`,
    body: params
})
    .then((data) => data.text())
    .then((res) => {
        console.log(res);
    })
    .catch(e => {
        //エラー発生時
        console.error(e.message)
    }
);

リファレンス

フェッチ API

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

所感

バニラJSの場合は以前にメモしたAXIOSライブラリを利用するのもあり。

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方