バニラ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」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
JavaScriptで連想配列を数値の降順でソートする方法
JavaScriptで連想配列を数値の降順でソートしたかったんだけど、色々調べて ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法
掲示板等で本文を送信する際に予め定めていた禁止ワードが含まれていないかチェックし ...
-
-
JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法
ページを開いた際に指定したテキストボックス(input type="text") ...