如何使用 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);
  });

登录后复制