JavaScript

JavaScript による HTTP(S)リクエスト送信のいろいろな書き方

投稿日:2019年8月9日 更新日:

1. はじめに

JavaScript を使って HTTP(S)リクエストを送信するには、大きく分けると以下の 2つの方法が用意されています。

XMLHttpRequest は古くから存在している低レベルなオブジェクトであり、そのまま使うというよりは、何かしらラッパーとなるライブラリを使うことが多いです。

Fetch API は新しい仕様で、そのまま使ってもそれほど苦にならない程度には、XMLHttpRequest より使いやすくなっています。但し、使いやすく開発された XMLHttpRequest のラッパーライブラリと比べて使いやすいかと言えば、少し微妙です。一方、Fetch API のラッパーとなるライブラリには、まだ決定版と言えるものがないようです。

本ページでは、これらを踏まえて JavaScript による HTTP(S)リクエスト送信のコードをいくつか紹介します。

2. JSON を取得するコード

JSON を返すURLにアクセスするコードのサンプルを見ていきます。

※ XMLHttpRequest オブジェクトはそのまま使わず、ラッパーライブラリである axios を利用します。

(1) axios (XMLHttpRequest) (基本形)

axios を使うコードの基本形です。

response.data がそのまま JSON オブジェクトになっています。

GETメソッドの場合

axios.get('https://example.com/foo/')
  .then(response => {
     console.log(JSON.stringify(response.data));
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    // skip
  });

POSTメソッドの場合

axios.post('https://example.com/foo/', {
    firstName: 'Ichiro',
    lastName: 'Suzuki'
  })
  .then(response => {
     console.log(JSON.stringify(response.data));
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    // skip
  });

(2) axios (XMLHttpRequest) (async/await を使用)

async/await を使ってみました。

分かりやすくするため、button要素の click イベントにイベントリスナーを登録する形にしています。

document.querySelector('#btn').addEventListener('click', async () => {
  try {
    const response = await axios.get('https://example.com/foo/');
    console.log(JSON.stringify(response.data));
  } catch (error) {
    console.error(error);
  }
});

(3) Fetch API (基本形)

Fetch API 用コードの基本形です。

fetch('https://example.com/foo/', {
    method: "GET",
    mode: "cors"
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    // 404 や 500 ステータスならここに到達する
    throw new Error('Network response was not ok.');
  })
  .then(resJson => {
    console.log(JSON.stringify(resJson));
  })
  .catch(error => {
    // ネットワークエラーの場合はここに到達する
    console.error(error);
  })
  • response.ok をチェックする必要があります。
    • response.ok が false の場合と、.catch() 句内の2箇所にエラー処理が分かれています。
  • response オブジェクトから JSON オブジェクトを取得する (response.json()) ために、Promiseチェーンが1段階増えます。
  • fetch()の注意点については、Fetch を使う – Web API | MDN を参照してください。

(4) Fetch API (json().then() を使用)

fetch('https://example.com/foo/', {
    method: "GET",
    mode: 'cors'
  })
  .then((response) => {
    if (response.ok) {
      return response.json().then(resJson => {
        console.log(JSON.stringify(resJson));
      });
    }
    throw new Error('Network response was not ok.');
  })
  .catch(error => {
    console.error(error);
  })
  • Promiseチェーンを1つ減らすために、response.json()return で返さず、.then() をつなげています。

(5) Fetch API (async/await を使用)

async/await を使ってみます。

分かりやすくするため、button要素の click イベントにイベントリスナーを登録する形にしています。

document.querySelector('#btn').addEventListener('click', async () => {
  try {
    const response = await fetch('https://example.com/foo/', {
      method: "GET",
      mode: 'cors'
    });

    if (response.ok) {
      const resJson = await response.json();
      console.log(JSON.stringify(resJson));
    } else {
      throw new Error('Network response was not ok.');
    }

  } catch (error) {
    console.error(error);
  }
});
  • 非同期処理である fetch()response.json() に await をつけることで同期処理にし、その戻り値を変数にセットしています。

3. デモページ

以下のリンク先に、デモを用意しました。

4. おわりに

個人的には、(2) が一番シンプルで分かりやすいと感じます。

fetch() メソッドは エラー処理がシンプルに書けないし、.json() メソッドが必要だったりして(しかも非同期!)ちょっと面倒です。使い勝手のよいラッパーライブラリの誕生が望まれます。

5. 参考

JavaScript

【JavaScript】 async / await の使い方

2019.02.04

📂-JavaScript

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

JavaScriptで一定時間待ってから処理を開始する方法

目次1. はじめに2. 手順(async function版)3. 手順(Promise をそのまま使った版)4. いつ使うのか?参考 1. はじめに JavaScriptで一定時間待ってから何か処理 …

JavaScript

【JavaScript】 async / await の使い方

本サイトの JavaScriptで一定時間待ってから処理を開始する方法 でも少し使ったのですが、JavaScript の async / await の使い方についてこちらのページにまとめておきます。 …

JavaScript

Yellow Fade の実装サンプル

JavaScript を使ったエフェクト処理の1つである Yellow Fade の実装サンプルを紹介します。

JavaScript

【JavaScript】無名関数とアロー関数とイベントリスナーのthis

目次1. はじめに2. イベントリスナーの登録無名関数を使う場合アロー関数を使う場合3. まとめ4. 参考 1. はじめに あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリック …

JavaScript

Node.js のバージョン管理ツール nvm の使い方

目次1. nvm とは?2. nvm の導入1. すでに nvm がインストールされているかチェックする2. nvm をインストールします3. Node.js のインストール4. nvm の便利なコマ …