Fetchリクエストを行う方法とエラーの処理

まず、Fetchリクエストを行う基本的な方法を見てみましょう。以下のコードは、GETリクエストを送信する例です。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // レスポンスのデータを処理するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });

上記のコードでは、fetch関数を使用してURLにGETリクエストを送信しています。thenメソッドを使用して、レスポンスをJSON形式で解析し、データを取得しています。成功した場合は、取得したデータを処理するためのコードが実行されます。エラーが発生した場合は、catchブロック内のエラーハンドリングコードが実行されます。

さらに、POSTリクエストを送信する例も紹介します。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    // レスポンスのデータを処理するコード
  })
  .catch(error => {
    // エラーハンドリングのコード
  });

上記のコードでは、fetch関数の第2引数としてオプションを指定してPOSTリクエストを送信しています。headersオプションを使用して、送信するデータのContent-Typeを指定し、bodyオプションを使用してデータをJSON形式で送信しています。

エラーハンドリングに関しては、catchブロック内でエラーを処理することができます。例えば、ネットワークエラーやサーバーエラーなどが発生した場合に適切な処理を行うことができます。

この記事では、Fetch APIを使用した基本的なリクエストの送信方法とエラーハンドリングの方法について説明しました。これらのコード例を参考にして、実際のプロジェクトでFetchリクエストを効果的に利用してください。