勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

あるサイトのソースコードを拝見しているとバニラ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」の使い方

 - JavaScript

  関連記事

Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...

JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法

ASPを使用したサイトでページ内に特定のClass要素が追加された際にJSでイベ ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法

ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...