Axios インターセプターを使用して API エラー応答を処理する方法

最新の Web アプリケーションを構築する場合、API 呼び出しとその応答の処理は開発の重要な部分です。人気のある JavaScript ライブラリである Axios は、HTTP リクエストの作成を簡素化しますが、開発者がより合理的かつ効率的な方法で応答やエラーを管理できるようにするインターセプタなどの組み込み機能も備えています。

この記事では、Axios インターセプターを使用して API エラー応答を効果的に処理し、アプリケーション全体でエラー処理を標準化できるようにすることに焦点を当てます。

アクシオスとは何ですか？

Axios は、API にリクエストを行うための async/await 構文をサポートする JavaScript 用の Promise ベースの HTTP クライアントです。使い方が簡単で、インターセプタを使用して機能を簡単に拡張できるため、人気があります。

Axios の基本の例:

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

この例では、.then と .catch を使用してリクエストとエラーを処理する方法を示していますが、複数の API リクエストを管理する必要がある場合、インターセプターを使用するとコードの効率が向上します。

Axios Interceptorとは何ですか?

Axios インターセプター は、.then または .catch によって処理される前に、リクエストとレスポンスの両方をインターセプトして処理できるようにする関数です。これは、すべてのリクエストに共通の設定を適用する必要がある場合、またはエラー応答を統一した方法で処理する必要がある場合に特に便利です。

インターセプタには主に 2 つのタイプがあります:

1. リクエスト インターセプター: リクエストが送信される前に、ヘッダー、トークン、またはその他の設定をリクエストに変更または追加するために使用されます。
2. レスポンス インターセプタ: 必要に応じてリクエストのログ記録や再試行など、レスポンスやエラーをグローバルに処理するために使用されます。

応答インターセプターを使用する理由

複数の API エンドポイントを処理する場合、それぞれが異なる種類のエラー メッセージまたはステータス コードを返す場合があります。インターセプターがないと、個々の API 呼び出しごとにエラーを処理する必要があり、コードが反復的で保守不能になる可能性があります。

レスポンス インターセプターを使用すると、すべてのエラー レスポンスを 1 か所で管理できるため、アプリ全体でエラーを処理する一貫したアプローチが保証されます。

Axios レスポンス インターセプターのセットアップ

1.Axiosをインストールする

まず、プロジェクトに Axios がインストールされていることを確認してください:

npm install axios

2. Axios インスタンスを作成する

インターセプターを設定するには、アプリ全体で再利用できる Axios インスタンスを作成するのが最善です。これは、リクエストとレスポンスの処理を標準化するのに役立ちます。

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

3. レスポンスインターセプターを追加する

レスポンス インターセプタを追加すると、個々の API 呼び出しで .then ブロックや .catch ブロックに到達する前にエラーをキャッチして処理できます。

npm install axios

4. API呼び出しの実行

インターセプターを配置すると、API 呼び出しに apiClient を使用できるようになります。エラーが発生した場合は、インターセプターによって自動的に捕捉され、処理されます。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',  // Replace with your API base URL
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

この設定では、単一の API 呼び出しごとにエラー処理コードを作成する必要はありません。インターセプターはこのロジックを一元化し、API 呼び出しをクリーンかつ保守しやすくします。

---

Axios インターセプターの実用的な使用例

1. 自動トークン更新

API が認証トークン (JWT など) を使用している場合、トークンの有効期限が切れて更新が必要になる状況が発生する可能性があります。 Axios インターセプターを使用すると、401 Unauthorized 応答を受信したときにトークンを自動的に更新できます。

apiClient.interceptors.response.use(
  (response) => {
    // If the response is successful (status code 2xx), return the response data
    return response;
  },
  (error) => {
    // Handle errors globally
    if (error.response) {
      // Server responded with a status code out of 2xx range
      const statusCode = error.response.status;
      const errorMessage = error.response.data.message || 'An error occurred';

      // Handle different status codes accordingly
      if (statusCode === 401) {
        // Handle unauthorized error, for example by redirecting to login
        console.error('Unauthorized access - redirecting to login');
      } else if (statusCode === 500) {
        // Handle server errors
        console.error('Server error - try again later');
      } else {
        // Handle other types of errors
        console.error(`Error ${statusCode}: ${errorMessage}`);
      }
    } else if (error.request) {
      // No response received (network error, timeout, etc.)
      console.error('Network error - check your internet connection');
    } else {
      // Something else happened during the request
      console.error('Request error:', error.message);
    }

    // Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
    return Promise.reject(error);
  }
);

2. ネットワークエラーの処理

アプリが外部 API に依存している場合、ネットワークの問題が一般的な問題となる可能性があります。 Axios インターセプターは、ネットワーク障害が発生した場合に、わかりやすいエラー メッセージを提供するのに役立ちます。

// Example API call
apiClient.get('/users')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    // This will be triggered if the error isn't handled by the interceptor
    console.error('Error fetching users:', error);
  });

---

Axios インターセプターを使用する利点

1. 集中エラー処理: API 呼び出しごとにエラー処理コードを記述する代わりに、単一の場所でエラーを処理できます。

2. よりクリーンなコード: エラー処理はインターセプターによって処理されるため、個々の API 呼び出しはよりクリーンかつ簡潔になります。

3. 保守性の向上: エラー処理の変更 (新しいケースの追加やエラー メッセージの修正など) を 1 か所で行うことができるため、コードベースの保守が容易になります。

4. 一貫性: インターセプターはエラー処理に対する一貫したアプローチを保証するため、エッジ ケースの欠落や冗長なコードの作成を心配する必要はありません。

---

結論

API エラー応答の処理に Axios インターセプターを使用すると、コードの構造、保守性、一貫性が大幅に向上します。エラー処理ロジックを一元化することで、API 呼び出しをより効率的にし、アプリケーション全体で反復的なコードを減らすことができます。

インターセプターは、トークンの更新の管理からネットワーク障害時のわかりやすいエラー メッセージの表示まで、幅広いユースケースに使用できる Axios の強力な機能です。今すぐ Axios インターセプターの活用を開始して、エラー処理を簡素化し、アプリケーションの復元力を向上させましょう!

以上がAxios インターセプターを使用して API エラー応答を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。