バニラ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ライブラリを利用するのもあり。
関連記事
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...
-
-
jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...