バニラ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ライブラリを利用するのもあり。
関連記事
-
-
Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法
CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法
ASPを使用したサイトでページ内に特定のClass要素が追加された際にJSでイベ ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法
ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...