fetch APIとは？

fetch APIは、ブラウザに標準で実装されたWeb APIであり、HTTPリクエストを簡単に処理することができます。
fetch APIは低レベルなAPIであり、リクエストやレスポンスの処理がやや複雑です。
しかし、Promiseを返すため非同期処理が簡単に行えるため、JavaScriptのプロミスを使った非同期処理が得意な開発者にとっては非常に使いやすいAPIです。

axiosとは？

axiosは、HTTPクライアントライブラリであり、HTTPリクエストを簡単に処理することができます。axiosは、シンプルなAPIを提供するため、開発者がHTTPリクエストをより簡単に処理できるようになっています。また、Promiseを返すため非同期処理が簡単に行えます。

fetch APIとaxiosの違い

fetch APIとaxiosの違いは、以下の通りです。

fetch APIはブラウザに標準で実装されたWeb APIであり、axiosはHTTPクライアントライブラリです。
fetch APIを使用する場合、ブラウザによって実装が異なることがあります。一方、axiosはブラウザによって実装が異なることがなく、開発者がHTTPリクエストをより簡単に処理できるようになっています。
fetch APIを使用する場合、ステータスコードの処理やエラー処理を手動で実装する必要があります。一方、axiosはシンプルなAPIを提供するため、ステータスコードの処理やエラー処理を簡単に行うことができます。
fetch APIを使用する場合、リクエストとレスポンスの処理がやや複雑になることがあります。一方、axiosは、HTTPリクエストの処理が簡単になります。

fetch APIとaxiosの使い分け

fetch APIとaxiosのどちらを使用するかは、状況によって異なります。fetch APIは標準のWeb APIであり、Promiseを返すため非同期処理が簡単に行えます。
一方、axiosは、シンプルなAPIを提供するため、HTTPリクエストの処理が簡単に行えますが、fetch APIよりもメモリ使用量が多く、大量のリクエストを行う場合にはパフォーマンスの問題が生じる可能性があります。

開発者は、目的や状況に応じて、fetch APIかaxiosのどちらを使用するかを判断する必要があります。

fetch APIでクロスオリジンリクエストをする方法

fetch APIでクロスオリジンリクエストをするには、modeオプションに'cors'を指定します。以下に、例を示します。

fetch('https://example.com/data', {
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

この例では、fetch APIの第二引数にmodeオプションを指定して、'cors'を指定しています。また、リクエストのヘッダーに'Content-Type'を指定し、データの形式をJSON形式にしています。レスポンスのデータは、responseオブジェクトのjsonメソッドを呼び出して取得しています。エラー処理についても、catchメソッドを使用して簡単に行うことができます。

axiosでクロスオリジンリクエストをする方法

axiosでクロスオリジンリクエストをするには、以下のようにして設定を行います。

axios.get('https://example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  },
  withCredentials: true,
  crossDomain: true
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

この例では、axiosのgetメソッドに第二引数として設定を行っています。リクエストのヘッダーに'Content-Type'を指定し、データの形式をJSON形式にしています。
また、withCredentialsオプションをtrueに設定して、Cookieを送信できるようにしています。
さらに、crossDomainオプションをtrueに設定して、CORSを有効にしています。これにより、axiosを使用してクロスオリジンリクエストを行うことができます。

fetch APIとaxiosのブラウザサポート

fetch APIとaxiosのブラウザサポートには違いがあります。
fetch APIは、現代のブラウザ（Google Chrome, Mozilla Firefox, Safari, Microsoft Edgeなど）でサポートされていますが、Internet Explorerではサポートされていません。
fetch APIをInternet Explorerで使用する場合は、ポリフィル（バックポート）を使用する必要があります。

一方、axiosは、すべての主要なブラウザでサポートされており、Internet Explorerもサポートされています。そのため、Internet Explorerをサポートする必要がある場合は、axiosを使用することが推奨されます。

axiosでキャンセルやタイムアウトの処理を加える方法

axiosを使用する場合、CancelTokenという機能を使用して、リクエストをキャンセルすることができます。以下に、例を示します。

const source = axios.CancelToken.source();

axios.get('https://example.com/data', {
  cancelToken: source.token
})
.then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('リクエストがキャンセルされました');
    } else {
      console.error(error);
    }
  });

setTimeout(() => {
  source.cancel('タイムアウトしました');
}, 5000);

この例では、axiosのgetメソッドにcancelTokenオプションを指定して、キャンセルトークンを設定しています。
キャンセルトークンを使用することで、リクエストをキャンセルすることができます。
また、setTimeoutを使用して、5秒後にリクエストをキャンセルするように設定しています。
キャンセルされた場合には、if文でaxios.isCancelメソッドを使用して、リクエストがキャンセルされた旨を出力しています。

以上のように、axiosを使用する場合、CancelTokenを使用してリクエストをキャンセルすることができます。

fetch APIのステータスコードの処理やエラー処理

fetch APIでは、レスポンスのステータスコードを処理するために、Responseオブジェクトのokプロパティを使用することができます。okプロパティは、レスポンスのステータスコードが200から299の範囲内にある場合にtrueを返します。200から299の範囲外の場合にはfalseを返します。

エラー処理については、fetch APIでは、catchメソッドを使用してエラーをキャッチすることができます。以下に、例を示します。

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('エラーが発生しました');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

この例では、Responseオブジェクトのokプロパティを使用して、レスポンスのステータスコードを判定しています。
レスポンスのステータスコードが200から299の範囲外の場合には、throw文でエラーを投げています。
エラー処理には、catchメソッドを使用しています。

axiosのステータスコードの処理やエラー処理

axiosでは、レスポンスのステータスコードを処理するために、thenメソッドに渡されるコールバック関数の第一引数にレスポンスオブジェクトが渡されます。
レスポンスオブジェクトには、ステータスコードやヘッダーなどの情報が含まれます。

エラー処理については、axiosでは、catchメソッドを使用してエラーをキャッチすることができます。以下に、例を示します。

axios.get('https://example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

この例では、axiosのgetメソッドを使用して、HTTP GETリクエストを送信しています。thenメソッドに渡されるコールバック関数の第一引数には、レスポンスオブジェクトが渡されます。response.dataを使用して、レスポンスのデータを取得しています。エラー処理には、catchメソッドを使用しています。

以上のように、fetch APIとaxiosでのステータスコードの処理やエラー処理は、それぞれ異なる方法で行われます。開発者は、目的や状況に応じて、適切な方法を選択する必要があります。

axiosのインターセプター

インターセプターは、HTTPリクエストやレスポンスを送信する前後に特定の処理を挟むことができる機能です。インターセプターを利用することで、共通の処理を簡単に実装することができます。
axiosでは、インターセプター機能が提供されており、リクエストやレスポンスの前後に処理を追加することができます。以下に、例を示します。

// リクエストインターセプターの追加
axios.interceptors.request.use(config => {
  // リクエストヘッダーに認証トークンを追加する処理
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('authToken');
  return config;
}, error => {
  return Promise.reject(error);
});

// レスポンスインターセプターの追加
axios.interceptors.response.use(response => {
  // 成功レスポンスの共通処理
  return response;
}, error => {
  // エラーレスポンスを共通で処理する
  console.error('エラーが発生しました');
  return Promise.reject(error);
});

axios.get('https://example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

まとめ

fetch APIとaxiosは、どちらもHTTPリクエストを行うための機能ですが、それぞれの特徴や使い勝手が異なります。
プロジェクトの要件や開発者の好みに応じて、適切な機能を選択しましょう。

fetch APIとaxiosについて