バニラ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ライブラリを利用するのもあり。
関連記事
-
-
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...
-
-
CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法
CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
Video.jsでYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...
-
-
PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法
PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...