勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptにてfetch APIを用いてHTTPリクエストを行う方法

  JavaScript

あるサイトのソースコードを拝見しているとバニラ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ライブラリを利用するのもあり。

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

 - JavaScript

  関連記事

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で ...