如何使用axios拦截器？

Question

我已经看过axios文档，但它说的只是

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

还有很多教程只展示了这段代码，但我很困惑它是用来做什么的，能不能有人给我举个简单的例子来效仿。

Answer 1

简单地说，它更像是每个HTTP操作的检查点。已经发出的每个API调用都通过这个拦截器传递。

那么，为什么有两个拦截器？

API调用由两个部分组成，一个请求和一个响应。由于它的行为类似于检查点，所以请求和响应有单独的拦截器。

一些请求拦截器用例-

假设在发出请求之前要检查凭据是否有效。因此，您可以在拦截器级别检查您的凭据是否有效，而不是实际进行API调用。

假设您需要向每个发出的请求附加一个令牌，而不是在每个Axios调用中重复令牌加法逻辑，您可以创建一个拦截器，该拦截器将一个令牌附加到每个发出的请求上。

一些响应拦截器用例-

假设您得到了一个响应，并根据您想要推断用户已登录的API响应来判断。因此，在响应拦截器中，您可以初始化处理登录状态的用户的类，并相应地对收到的响应对象进行更新。

假设您已经请求了一些具有有效API凭据的API，但是您没有访问数据的有效角色。因此，您可以从响应拦截器触发一个警告，表示不允许用户使用。这样，您将从未经授权的API错误处理中保存，您必须对每个Axios请求执行这些错误处理。

下面是一些代码示例

请求拦截器

• 可以通过执行(在本例中，通过检查环境变量)打印axios的配置对象(如果需要的话)： const === ==== "development"；axios.interceptors.request.use((config) => { /** In dev，拦截请求并将其记录到控制台中，用于dev */ if (调试){ console.info("✉️"，config)；}返回配置；}，(错误) => { if (调试){ console.error("✉️"，error)；}返回Promise.reject(错误)；})；
• 如果您想检查正在传递的标头/添加更多的通用标头，则可以在config.headers对象中使用。例如： axios.interceptors.request.use((config) => { config.headers.genericKey = "someGenericValue"；返回配置；}，(错误) => {返回Promise.reject(错误)；})；
• 如果是GET请求，所发送的查询参数可以在config.params对象中找到。

响应拦截器

• 您甚至可以选择，在拦截器级别解析API响应，并将解析的响应向下传递，而不是原始响应。如果API在多个地方以相同的方式使用，它可能会节省您一次又一次地编写解析逻辑的时间。一种方法是在api-request中传递一个额外的参数，并在响应拦截器中使用相同的参数来执行您的操作。例如： //假设我们传递一个额外的参数"parse: true“axios.get("/city-list"，{ parse: true })； 一旦在响应拦截器中，我们可以使用它如下： Axios.interceptors.response.use((响应) => { if (response.config.parse) {//在这里执行操作并更改响应对象}返回响应；}，(错误) => {返回Promise.reject(error.message)；})； 因此，在本例中，每当parse对象在response.config中存在时，操作就会完成，在其余的情况下，它将按原样工作。
• 您甚至可以查看到达的HTTP代码，然后作出决定。例如： Axios.interceptors.response.use(响应) => { if(response.status === 401) {告警(“未授权”)；}返回响应；}，(错误) => { if (error.response & error.response.data) {返回Promise.reject(error.response.data)；}返回Promise.reject(error.message)；}；

Answer 2

例如，如果希望捕捉从发送请求到收到响应的时间，可以使用以下代码：

const axios = require("axios");

(async () => {
  axios.interceptors.request.use(
    function (req) {
      req.time = { startTime: new Date() };
      return req;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios.interceptors.response.use(
    function (res) {
      res.config.time.endTime = new Date();
      res.duration =
        res.config.time.endTime - res.config.time.startTime;
      return res;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios
    .get("http://localhost:3000")
    .then((res) => {
      console.log(res.duration)
    })
    .catch((err) => {
      console.log(err);
    });
})();

Answer 3

它就像一个中间件，基本上它被添加到任何请求(无论是GET、POST、PUT、DELETE)或任何响应(从服务器获得的响应)。它经常用于涉及授权的情况。

看看这个：Axios拦截器和异步登录

下面是关于此的另一篇文章，并给出了一个不同的示例：https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0

因此，其中一个示例的要点是，您可以使用拦截器检测授权令牌是否过期(例如，如果您获得403 )，并重定向页面。