Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例

Axios 的响应拦截器允许在请求得到响应后，对响应数据进行处理。它类似于 Vue 的全局前置守卫，可以在响应发送回执行环境之前，修改、过滤响应数据。

扩展：如果你想尝试更便捷、高效的方式来调试 API，那么可以使用 Apifox。Apifox 提供了直观的界面，让你轻松管理并调试项目接口。

Axios 响应拦截器的作用

对响应数据进行处理,如格式化、过滤等
对响应错误进行统一处理
在发送响应前修改响应配置,如添加/修改 HTTP 头等

Axios 响应拦截器的概念

在 Axios 中，响应拦截器允许你在收到服务器响应之后，但在 .then 或 .catch 处理响应数据之前，对响应进行操作。这对于在全局范围内处理错误、进行数据转换或者添加授权头部等操作非常有用。

Axios 响应拦截器的写法

在 Axios 中，有两种常见的响应拦截器写法，一种是全局拦截器，另一种是特定请求的拦截器。

全局拦截器

全局响应拦截器会应用于每个请求的响应，无论是成功的还是失败的。

// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做些什么
    return response;
  },
  function(error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

特定请求的拦截器

你也可以为特定的请求添加响应拦截器，这将只影响该请求的响应。

axios.get('/user/12345', {
  // 请求配置
}).then(function(response) {
  // 请求成功处理
}).catch(function(error) {
  // 请求失败处理
});

// 为特定请求添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做些什么
    return response;
  },
  function(error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

实践案例

假设我们要处理所有响应中的错误状态码，并在控制台输出错误信息。我们可以利用响应拦截器来实现这一目标。
首先，让我们创建一个基本的 Axios 请求，并设置全局的响应拦截器来处理错误。

// 导入 Axios 库
const axios = require('axios');

// 添加全局响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做些什么
    return response;
  },
  function(error) {
    // 对响应错误做些什么
    if (error.response) {
      console.error('Error status:', error.response.status);
      console.error('Error data:', error.response.data);
    }
    return Promise.reject(error);
  }
);

// 发起 Axios 请求
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    console.log('Response data:', response.data);
  })
  .catch(function(error) {
    console.error('Request failed:', error);
  });

在这个案例中，全局的响应拦截器会在每个响应中检查错误状态码，并输出错误信息到控制台。

提示、技巧与注意事项

顺序问题： 拦截器的顺序很重要。响应拦截器的执行顺序是按照你添加它们的顺序来的，所以请确保你添加的拦截器是有意义的。
修改数据： 响应拦截器可以修改响应数据。你可以在拦截器中对响应数据进行转换，例如将 JSON 数据转换为对象。
错误处理： 响应拦截器非常适合处理全局的错误情况，如处理不同的 HTTP 状态码，但不要忽略针对特定请求的错误处理。

使用 Apifox 来 Mock 数据

当我们作为前端开发人员使用 Axios 来进行接口请求时，有时候我们可能会遇到一个问题：等待后端开发人员提供接口。这往往会导致我们在开发时遇到阻碍，进而影响项目的进度。不过，我了解到一个非常实用的工具可以解决这个问题，它就是 Apifox。

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

更为重要的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。

立即体验 Apifox

总结

Axios 的响应拦截器是一个强大的工具，允许你在处理服务器响应前对其进行操作。本文介绍了全局拦截器和特定请求拦截器的写法，以及一个处理错误状态码的实际案例。通过合理使用响应拦截器，你可以更好地控制和管理你的网络请求，实现更好的用户体验。

知识扩展：

参考链接：

Axios 官方文档：https://axios-http.com/docs/intro