【解説】JavaScriptのFetch APIの使い方

記事内に広告を含みます

JavaScriptのfeatch()の使い方について、自分用のメモとしてまとめてみました！

参考になれば幸いです。

【解説】JavaScriptのFetch APIの使い方
【解説】JavaScriptのFetch APIのその他の使い方
【解説】JavaScriptのFetch APIの使い方：まとめ

【解説】JavaScriptのFetch APIの使い方

fetchは、JavaScriptでHTTPリクエストを送信するためのモダンなAPIのこと。

Promiseを返すのが特徴で、thenやawaitでの処理が可能です。

2024年11月23日【解説】JavaScriptのPromise｜async／awaitの使い方

そんなfetchの使い方について、下記の順に解説していきます。

①：基本的な使い方

②：レスポンスの処理

③：レスポンスデータを取得

④：実際に使ってみた！

順に見ていきましょう。

①：基本的な使い方

fetch関数の第一引数にて、アクセスしたいURLを記述します。

ちなみに相対URLでも可能です。

fetch('ここにURLを記述');

②：レスポンスの処理

続いてURLからのレスポンスに対して処理を行います。

fetchはPromiseを返すため、.thenや.catchをつなげて処理の記述が可能です。

fetch('ここにURLを記述')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラーの処理
  });

③：レスポンスデータを取得して使用

次に取得したレスポンスデータを使用します。

ただ取得したままのデータでは使用できないため、扱える形に変換する必要があるんですよね。

そこで使えるのが主に下記メソッドたち。

メソッド名	実行内容
`response.json()`	レスポンスを JSONオブジェクトとして取得してパース
`response.text()`	レスポンスをテキストとして取得
`response.blob()`	レスポンスをBlobとして取得
`response.formData()`	レスポンスをFormData オブジェクトとして取得
`response.arrayBuffer()`	レスポンスをArrayBufferとして取得

試しに「.json」を使ってみて、データを取得後使用してみました。

fetch('ここにURLを記述')
  .then(response => {
    return response.json(); // JSON形式に変換
  })
  .then(data => {
    console.log(data); // データを使用
  })
  .catch(error => {
    console.error(error);
  });

JSON形式に変換されたデータが、「data」という引数に入りコンソールログで出力しているという感じですね。

④：実際に使ってみた！

実際に「Pokemon API」という、ポケモンのデータが公開されてるAPIにて使ってみました。

下記のようにピカチュウのデータが入ってるURLにアクセスして、そのレスポンスデータをJSONにして、その中のnameを出力すると。。

fetch('https://pokeapi.co/api/v2/pokemon/pikachu/')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data.name);
  })
  .catch(error => {
    console.error(error);
  });

pikachu

「pikachu」とでました！

【解説】JavaScriptのFetch APIのその他の使い方

最後にfetchのその他の使い方について解説していきます。

それがこちら。

・リクエストの設定

・エラーハンドリング

・async／awaitでの書き方

順に見ていきましょう。

リクエストの設定

fetchの第二引数にて、オプションオブジェクトを渡すことが可能です。

リクエストメソッドやヘッダーを指定できるのが特徴です。

fetch('ここにURLを記述', {
  method: 'POST', // メソッドを指定 (GET, POST, PUT, DELETE, etc.)
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token',
  },
  body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
});

エラーハンドリング

response.ok を使って、HTTPレスポンスが成功したかどうかを確認することが可能です。

if (!response.ok) {
  throw new Error(`${response.status}`);
}

response.okがtrueになる	ステータスコードが 200～299 の場合
response.okがfalseになる	それ以外のステータスコード（例: 404, 500など）

そもそもfetchはHTTPステータスコードが失敗（404や500）でも、エラーをスローしないとのこと。

そのためレスポンスの成功可否をresponse.okで確認にして、失敗したときにcatchに移します。

下記コードがやり方の例です↓

fetch('ここにURLを記述')
  .then(response => {
    if (!response.ok) {
      throw new Error(`${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

async／awaitでの書き方

async／awaitを使うことで、より見やすく書くことが可能です！

async function testFetch() {
  try {
    const response = await fetch('ここにURLを記述');
    const data = await response.json(); // JSON形式に変換
    console.log(data); // データを使用
  } catch (error) {
    console.error(error);
  }
}

testFetch();

ちなみにawaitが例外をスローしたときのために、try~catch構文を使います。

エラーによりプログラムが停止するのを防ぐためですね。