勉強したことのメモ

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

  関連記事

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

JavaScriptで連想配列を数値の降順でソートする方法

JavaScriptで連想配列を数値の降順でソートしたかったんだけど、色々調べて ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法

掲示板等で本文を送信する際に予め定めていた禁止ワードが含まれていないかチェックし ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...