fetchの新しい利用方法

GETリクエストの送信: fetch APIを使用してGETリクエストを送信するには、以下のようにコードを記述します。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // レスポンスのデータを処理するコードをここに記述する
  });

上記の例では、fetch関数にリクエスト先のURLを渡し、thenメソッドを使用してレスポンスを処理しています。responseオブジェクトのjsonメソッドを呼び出すことで、レスポンスデータをJSON形式で取得できます。

POSTリクエストの送信: fetch APIを使用してPOSTリクエストを送信するには、以下のようにコードを記述します。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    // POSTデータをここに記述する
  })
})
  .then(response => response.json())
  .then(data => {
    // レスポンスのデータを処理するコードをここに記述する
  });

上記の例では、fetch関数の第二引数にオプションを指定してPOSTリクエストを送信しています。headersオプションを使用して、リクエストのContent-Typeを指定し、bodyオプションでPOSTデータを送信します。

エラーハンドリング: fetch APIでは、ネットワークエラーやサーバーからのエラーレスポンスなど、さまざまなエラーが発生する可能性があります。エラーハンドリングを行うためには、以下のようにコードを記述します。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('エラーレスポンスが返されました');
    }
    return response.json();
  })
  .then(data => {
    // レスポンスのデータを処理するコードをここに記述する
  })
  .catch(error => {
    // エラーハンドリングするコードをここに記述する
  });

上記の例では、responseオブジェクトのokプロパティを使用して、正常なレスポンスかどうかをチェックしています。okがfalseの場合、throw文を使用してエラーをスローします。

以上が、fetch APIの新しい利用方法のいくつかの例です。これらのコード例を参考にして、自分のウェブアプリケーションでfetch APIを効果的に活用してみてください。