如何使用 Axios 攔截器處理 API 錯誤回應-js教程-PHP中文網

How to Use Axios Interceptors to Handle API Error Responses

建立現代 Web 應用程式時，處理 API 呼叫及其回應是開發的關鍵部分。 Axios 是一個流行的JavaScript 庫，它簡化了HTTP 請求的過程，但它還具有諸如攔截器之類的內建功能，允許開發人員以更簡化、更有效率的方式管理回應和錯誤。

在本文中，我們將重點介紹如何使用 Axios 攔截器有效地處理 API 錯誤回應，從而使您能夠在整個應用程式中標準化錯誤處理。

什麼是 Axios？

Axios 是一個基於 Promise 的 JavaScript HTTP 用戶端，支援使用 async/await 語法向 API 發出請求。它很受歡迎，因為它使用簡單，並且可以通過攔截器輕鬆擴展其功能。

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 攔截器？

Axios 攔截器 是允許您在 .then 或 .catch 處理請求和回應之前攔截和處理請求和回應的函數。當您需要將通用配置應用於所有請求或以統一的方式處理錯誤回應時，這特別有用。

攔截器主要有兩種：

請求攔截器：用於在發送請求之前修改或新增請求頭、令牌或其他配置。
回應攔截器：用於全域處理回應或錯誤，包括在必要時記錄或重試請求。

為什麼使用響應攔截器？

處理多個 API 端點時，每個端點可能會傳回不同類型的錯誤訊息或狀態代碼。如果沒有攔截器，您將需要處理每個單獨的 API 呼叫的錯誤，這可能會導致重複且難以維護的程式碼。

使用回應攔截器，您可以在一個位置管理所有錯誤回應，確保在整個應用程式中採用一致的方法處理錯誤。

設定 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

攔截器就位後，您現在可以使用 apiClient 進行 API 呼叫。如果發生錯誤，攔截器會自動捕獲並處理。

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);
  });

登入後複製