【JavaScriptの応用】Fetch APIとHTTPリクエスト

JavaScriptには、Fetch APIと呼ばれるサーバーからデータを取得するための仕組みが存在します。
従来は、XMLHttpRequest(XHR)で記述されるAjax通信による方法が使われていましたが、現在ではより簡潔に表現することのできるFetch APIが主流となってきています。

そこで今回は、Fetch APIの基本的な使い方について解説していきます。

Fetch API

Fetch APIは、XMLHttpRequest(XHR)に代わるHTTPリクエストを発行するためのAPI通信の仕組みのことです。

XHRと同様の機能を持ち合わせていますが、Fetch APIはXHRに比べてリクエストの送信やレスポンスの扱いが容易であることが特徴です。
Fetch APIが導入されてからは、よりシンプルな記述で表現できるようになりました。

Fetch APIの使い方

Fetch APIは、PromiseベースのAPIで、リクエスト方法も非常にシンプルです。
ここからは実際にFetch APIを使ってみましょう。

Fetchの基本構文

fetchメソッドは、以下のように表現することができます。
fetchメソッドの第一引数にアクセスしたいURLを記述するだけでリクエストが可能です。
第二引数には、オプションでメソッドやヘッダーなどのinitオブジェクトを記述します。

fetch(URL, initオブジェクト)

以下のXHRによるリクエスト方法と比べると、短いコードで済むことが分かります。

const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();

fetchメソッドによって指定したURLにアクセスされると、ブラウザはPromiseオブジェクトとしてレスポンスを返します。そのため、thenやcatchメソッドで返ってきたPromiseの後処理を指定していきます。

fetch("https://sample.com")
  .then((response) => {
    // fetch成功の場合
  })
  .catch((error) => {
    // fetch失敗の場合
  });

Responseオブジェクト

返ってきたPromiseオブジェクトは、レスポンスの本文を持つResponseオブジェクトとしての役割があります。

まずは、リクエストが成功したのか失敗したのかステータスを確認することが必要です。
例えば、以下のプロパティを使用してアクセスに成功したかどうかを調べることができます。

response.ok：ステータスコードが200〜299
response.status：ステータスを確認するHTTPコード

ステータスを確認しただけでは、レスポンス本文にアクセスすることはできないため、以下のようなメソッドの呼び出しも必要です。

response.json()：JSON形式
response.text()：テキスト形式
response.blob()：Blob形式
response.formData()：FormData形式
response.arrayBuffer()：ArrayBuffer形式

このように、さまざまな形式でレスポンス本文にアクセスすることができます。

initオブジェクト

fetchメソッドの第二引数には、さまざまな設定をコントロールするためにinitオブジェクトを指定することができます。

以下は、initオブジェクトの例です。リクエストの送信時に細かい設定を行うことができます。

method：HTTPメソッド
headers：リクエストヘッダーを持つオブジェクト
body：送信するデータ

GETメソッドを利用してJSONデータを取得する

さいごに、fetch APIでデータを取得する例を見てみましょう。
以下は、JSON形式でレスポンスを受ける例です。initオブジェクトのmethodにGETを指定しています。

const getUser = async (userId) => {
  const url = `http://localhost:3000/users/${userId}`;
  const response = await fetch(url, { method: "get"})
  const json = response.json();
  if (response.status == 200) {
    return Promise.resolve(json);
  } else {
    return Promise.reject(json.error);
  }
};

getUser(10)
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

上記のような記述だけでリクエストを送信することができます。
URLへのアクセスからレスポンスを受け取るまでの流れが直感的で分かりやすい印象です。