axios 响应拦截器 抛出状态码

Axios 响应拦截器与状态码处理

在现代的前端开发中，Axios 是一个广泛使用的 HTTP 客户端库，特别是在 React 和 Vue 等框架中。它可以帮助我们处理与 API 的交互，并且提供了拦截请求和响应的能力。这篇文章将详细介绍 Axios 的响应拦截器，并教你如何根据状态码抛出相应的错误或处理逻辑。

一、什么是响应拦截器？

Axios 提供了请求和响应拦截器，允许我们在请求发送之前或接收到响应之后对其进行处理。响应拦截器通常用于处理 API 响应中的错误、处理状态码，或者为特定的响应数据执行某些逻辑。

二、使用响应拦截器

2.1 安装 Axios

首先，确保你已经安装了 Axios。在你的项目目录中运行以下命令：

登录后复制

npm install axios

• 1.

2.2 配置响应拦截器

下面是一个使用 Axios 响应拦截器的基本代码示例。在这个例子中，我们将根据不同的状态码处理响应，并抛出相应的错误。

登录后复制

import axios from 'axios';

// 创建一个 Axios 实例
const apiClient = axios.create({
  baseURL: '
  timeout: 10000, // 设置请求超时时间
});

// 响应拦截器
apiClient.interceptors.response.use(
  response => {
    // 对响应数据进行处理
    return response.data; // 在这里我们只返回数据部分
  },
  error => {
    // 对响应错误进行处理
    const { response } = error;

    if (response) {
      // 服务器返回的状态码
      const statusCode = response.status;
      switch (statusCode) {
        case 400:
          console.error('请求错误，状态码 400');
          break;
        case 401:
          console.error('未授权，状态码 401');
          break;
        case 404:
          console.error('请求的资源未找到，状态码 404');
          break;
        case 500:
          console.error('服务器错误，状态码 500');
          break;
        default:
          console.error(`未知错误，状态码 ${statusCode}`);
      }
      return Promise.reject(response); // 抛出状态码错误
    } else {
      console.error('网络错误或请求未发出', error.message);
      return Promise.reject(error);
    }
  }
);

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.

2.3 解释代码

在上述代码中，我们创建了一个 Axios 实例，然后设置了响应拦截器。response.use 方法接受两个回调函数，第一个用于处理正常响应，第二个用于处理错误响应。在错误处理函数中，我们根据不同的状态码输出相应的错误信息，并抛出该错误.

三、状态码处理的序列图

为了更好地理解状态码处理的流程，我们用 Mermaid 语言描述该流程，如下所示：

这个序列图展示了用户发起请求的整个流程，以及 Axios 如何处理请求和响应。

四、使用 Axios 进行实际请求

现在我们来实现一个实际的 API 请求，并结合我们创建的响应拦截器。你可以在你的应用中使用如下代码进行请求：

登录后复制

async function fetchData() {
    try {
        const data = await apiClient.get('/data'); // 请求数据
        console.log('获取的数据:', data);
    } catch (error) {
        // 这里可以进行其他错误处理的逻辑，如弹出提示框或重定向
        console.error('请求失败:', error);
    }
}

// 调用 fetchData 函数
fetchData();

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

五、旅行图

接下来，我们用 Mermaid 语言展示一个简单旅行图，描述用户在使用该 API 的旅程：

六、总结

在本篇文章中，我们讨论了如何使用 Axios 的响应拦截器来处理 HTTP 响应，并根据状态码抛出错误或进行相应处理。通过代码示例和图示，我们希望能帮助你更好地理解 Axios 的使用方法。

响应拦截器不仅可以简化代码的书写，还能使错误处理变得更加统一和集中。希望这篇文章能帮助你在开发中更有效地使用 Axios。如果你对响应拦截器有更多的问题或想法，欢迎在评论区分享！

原创作者: u_16213446 转载于: https://blog.51cto.com/u_16213446/11767987