勉強したことのメモ

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

  関連記事

バニラJavaScriptでinputタグのtypeをtext⇔passwordに変更する方法

チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...

AndroidのChromeでハマった点

Nexus7(Android4.3)のChromeでハマった。 iPhoneやG ...

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。 担当外だった ...

Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...