今回は、fetch 関数の内部的な挙動と、Response オブジェクトについて見ていきます。
JavaScript の fetch API は、ブラウザでリクエストを簡単に行うためのものでしたね！
fetch 関数の基本
fetch 関数は、ウェブサーバーにリクエストを送信して、レスポンスを受け取るために使います。
fetch を使うと非同期にデータを取得し、それを簡単に操作できます！
使用例
const fetchUsers = async () => {
// fetch でリクエストを送信
const res = await fetch("https://jsonplaceholder.typicode.com/users/");
// JSON データを取得
const users = await res.json();
console.log(users); // 取得したデータをコンソールに表示
};
fetchUsers();
fetch 関数が成功すると、Response というオブジェクトが返されます。
このオブジェクトには、レスポンスのいろいろな情報が含まれています。
Response オブジェクトの主なプロパティとメソッド
- status: HTTP ステータスコード（例: 200, 404）
- statusText: ステータスコードに対応するテキスト（例: "OK", "Not Found"）
-
ok: ステータスが 200-299 の範囲内にある場合は
true -
headers: レスポンスヘッダーを操作するための
Headersオブジェクト -
body:
ReadableStreamとして提供され、レスポンスのデータが含まれています。非同期的にデータが少しずつ読み取られます。 -
json(): レスポンスボディを JSON としてパースします。プロミスを返すので、
thenやawaitでプロミスを解決しないと使えない←よくみるやつ - text(): レスポンスボディをテキストとして返す
- blob(): レスポンスボディを Blob として返す
- arrayBuffer(): レスポンスボディを ArrayBuffer として返す
fetch の内部的な挙動
それでは、fetch 関数がどのように動作するのか見ていきます！
const res = await fetch("https://jsonplaceholder.typicode.com/users/");
この時点で、指定された URL にリクエストが送信され、リクエストが成功すると、Response オブジェクトが返されます。
Response bodyの読み取り
const users = await res.json();
res.json() を使って、Response の body 部分を JSON に変換します。このメソッドはプロミスを返し、非同期でデータが読み取られるのを待ちます。
ReadableStream??(リーダブルストリーム？？)
ホースから水が出てくるように、少しずつデータを流してくれるものです。
データの受け取りは一度に全部ではなく、少しずつ非同期で（後から順々に）受け取ります。
res.json() は、ReadableStream からすべてのデータを非同期で読み取ってから JSON オブジェクトに変換することを保証してくれます！
JSON データの取得
それではもう一度具体的なコードを見てみます！
const fetchUsers = async () => {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/users/");
// ステータスコードをチェック
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const users = await res.json(); // レスポンスボディを JSON に変換
console.log(users); // データをコンソールに表示
} catch (error) {
console.error('Fetch error:', error); // エラーハンドリングもしておく
}
};
fetchUsers();
まとめ
- fetch が返す Response オブジェクトには、ステータスコードやレスポンスボディが含まれている
- レスポンスボディは json(), text(), blob(), arrayBuffer() などのメソッドで読み取る
- これらのメソッドはすべてプロミスを返すので、プロミスを解決する必要がある
fetch と Response オブジェクトの関係を理解できたので、「これは一体何がどうなっているんだ...？」ということがなくなりました！データの取得は避けて通れないので、しっかり理解しておきましょう！