JavaScriptには、Fetch APIと呼ばれるサーバーからデータを取得するための仕組みが存在します。
従来は、XMLHttpRequest(XHR)で記述されるAjax通信による方法が使われていましたが、現在ではより簡潔に表現することのできるFetch APIが主流となってきています。
そこで今回は、Fetch APIの基本的な使い方について解説していきます。
XHRによる非同期通信方法について知りたい方は、以下の記事をご覧ください。
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メソッドの第1引数にアクセスしたいURLを記述するだけでリクエストが可能です。
第2引数には、オプションでメソッドやヘッダーなどの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メソッドの第2引数には、さまざまな設定をコントロールするためにinitオブジェクトを指定することができます。
以下は、initオブジェクトの例です。リクエストの送信時に細かい設定を行うことができます。
・method：HTTPメソッド
・headers：リクエストヘッダーを持つオブジェクト
・body：送信するデータ
GETメソッドを利用してJSONデータを取得する
ここまでがFetch APIの基本的な使い方です。
さいごに、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へのアクセスからレスポンスを受け取るまでの流れが直感的で分かりやすい印象です。上記のような記述だけでリクエストを送信することができるのです。
まとめ
今回は、Fetch APIを使用してHTTPリクエストを送信する方法について解説しました。
基本的なFetchリクエストは、かんたんに設定することができ、初心者でも扱いやすいと感じられたのではないでしょうか。
実際には、initオブジェクトの中身を記述することで、より高度なリクエスト設定を行うことができます。
Fetch APIは、XHRに代わるだけあって、よりモダンで強力な通信手法です。
これを機に基本的な使い方を身に付けてみてはいかがでしょうか。
JavaScript関連記事
