JavaScriptのfetch()の使い方

この記事ではJavaScriptのFetchの使い方について紹介します。

fetchを利用するかaxiosを利用するか迷う方がいるかもしれませんが今回はその違いには言及せず、あくまでfetchの利用方法について記載を行いますのでご了承ください。

Fetch APIとAxiosの違いについては下記の投稿で扱っております。興味のある方はぜひご覧ください。

7月 27, 2023 Fetch APIとAxiosの違い

それでは早速みていきましょう。

fetch()の利用方法

fetch()の基本的な利用方法は下のソースコードのようになります。

fetch('https://api.example.com/data')
  .then(response => response.json()) // レスポンスをJSON形式に変換
  .catch(error => console.error('エラー:', error)); // エラーハンドリング

fetch()は指定したURLからリソースを非同期に取得し、それをPromiseオブジェクトとして返します。

それによって、データが取得された後に処理を続行することが可能となります。

エラーハンドリングの方法

fetch()はリクエストがネットワークエラーによって完全に失敗した場合を除き、Promiseをrejectしません。

代わりに、okステータスがfalseに設定されたResponseをresolveします。

HTTPステータスコードが404や500の場合でもこれに該当します。

これらの場合を適切に処理するには次のようにします：

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワーク応答がOKではありません');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('エラーが発生しました:', error));

fetch()を利用してPostリクエストを送信する

fetch()はGETリクエストだけでなく、POST、DELETEなど他のHTTPメソッドもサポートします。

早速、そのコードを紹介します。

下の例はContent-Type': 'application/jsonのリクエストを送信する例です。

fetch(url, {
  method: 'POST', // メソッドを指定
  headers: {
    'Content-Type': 'application/json', // コンテンツタイプを指定
  },
  body: JSON.stringify({key: 'value'}), // 送信するデータを文字列化
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('エラー:', error));

fetch()に指定可能なオプション

fetch()の第二引数にはオプションとして設定可能なプロパティを含むオブジェクトを指定できます。

参照

参考

フェッチ API – Web API | MDN