バニラ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ライブラリを利用するのもあり。
関連記事
-
-
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...
-
-
JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
無料でシンプルなアイコンを設置できる「Feather」の利用方法
ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...
-
-
JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...