11.4 Fetch API とは
現代の JavaScript では、より直感的で Promise ベースの Fetch API を使うのが標準です。コードが短くなり、async/await と組み合わせることで非常に読みやすくなります。
11.4.1 Fetch API を使用したプログラム
Fetch API の動作を確認しましょう。
ソースフォルダ：public/ch11
ファイル名：fetch.js
➢ fetch.html
前の章で作った ch10/try-catch.html をコピーし、ch11 にペーストしてください。
その際に、ファイル名を fetch.html に変更します。
ファイル内の try-catch.html や try-catch.js の記述も、fetch.html や fetch.js に修正します。
➢ fetch.js
// fetch.js
async function fetchUser() {
try {
// 1. fetchを使ってデータを取得しにいきます
const response = await fetch("https://jsonplaceholder.typicode.com/users/2");
// 2. レスポンスが正常（200系）かチェックします
if (!response.ok) {
throw new Error(`HTTPエラーが発生しました。ステータス: ${response.status}`);
}
// 3. テキストデータをJSON（オブジェクト）に変換します
const user = await response.json();
// 4. 結果を表示します
alert(`【成功】Fetchで取得したユーザー名: ${user.name}`);
} catch (error) {
// 通信失敗やパース失敗時のエラー処理
alert(`通信に失敗しました: ${error.message}`);
}
}
fetchUser();
実行結果
解説
一行ずつ、紐解きましょう。
3 行目の関数宣言には、async キーワードが付いています。
Fetch API は Promise ベースのため、await キーワードで、データの取得か通信の失敗が起こるまで待つ必要があります。
3: async function fetchUser() {
6 行目は Fetch API の本体です。fetch は Promise を返しますが、この Promise はサーバーからのレスポンスとなる response オブジェクトを履行します。このレスポンスに対して適切なメソッドを呼び出すと、リクエストに対するステータスの取得や、レスポンスそのものを JSON に変換して、そこからオブジェクトを取り出すことができます。
6: const response = await fetch("https://jsonplaceholder.typicode.com/users/2");
9 行目は、レスポンスが OK だったかを確認して、エラーの時は Error オブジェクトを new します。
9: if (!response.ok) {
14 行目は、user というオブジェクトを宣言し、JSON 形式でレスポンスをパースした結果を代入します。
14: const user = await response.json();
このわずか３行の間に、サーバーの通信結果から user というオブジェクトが生成することができました。
このオブジェクトに対し、キーの name でアクセスすれば、その値を取り出せるようになります。
17: alert(`【成功】Fetch で取得したユーザー名: ${user.name}`);
Fetch API の優れた点は、この簡便さと言っても過言ではありません。