Javascript 如何使用axios拦截器？

我看过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);
});

---

还有很多教程只显示了这段代码，但我不清楚它的用途，有人能给我举个简单的例子吗。

它就像一个中间件，基本上它是在任何请求（无论是获取、发布、放置、删除）或任何响应（从服务器获得的响应）上添加的。 它通常用于涉及授权的情况

看看这个：

下面是另一篇关于这一点的文章，有一个不同的例子：

---

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

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

看看这个：

下面是另一篇关于这一点的文章，有一个不同的例子：

---

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

简单地说，它更像是每个http操作的检查点。已进行的每个api调用都将通过此拦截器传递

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

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

一些请求拦截器用例-

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

假设您需要为每个请求附加一个令牌，而不是在每次axios调用时复制令牌添加逻辑，您可以创建一个拦截器，在每个请求上附加一个令牌

一些响应拦截器用例-

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

假设您已请求具有有效api凭据的某些api，但您没有访问数据的有效角色。因此，您可以触发响应拦截器发出的警报，表示不允许该用户。这样，您就可以避免在每次发出axios请求时必须执行的未经授权的api错误处理

现在就可以提出这些用例

希望这有帮助：）

编辑

由于这个答案越来越受欢迎，下面是一些代码示例

请求拦截器

=>可以通过以下方式打印axios的配置对象（如果需要）：

const DEBUG=process.env.NODE\u env==“开发”；
axios.interceptors.request.use（（配置）=>{
/**在dev中，截取请求并将其记录到dev的控制台中*/
if（DEBUG）{console.info（“✉️ ", 配置）；}
返回配置；
}，（错误）=>{
if（DEBUG）{console.error（“✉️ “，错误）；}
返回承诺。拒绝（错误）；
});

=>如果要检查正在传递的头/添加任何其他通用头，可以在

config.headers

对象中找到它。例如：

axios.interceptors.request.use（（配置）=>{
config.headers.genericKey=“someGenericValue”；
返回配置；
}，（错误）=>{
返回承诺。拒绝（错误）；
});

=>如果是

GET

请求，则可以在

config.params

对象中找到正在发送的查询参数

响应拦截器

=>您甚至可以选择在拦截器级别解析api响应，并向下传递解析的响应，而不是原始响应。如果api在多个位置以相同的方式使用，这可能会节省您反复编写解析逻辑的时间。一种方法是在

api请求

，并在响应拦截器中使用相同的参数来执行您的操作。例如：

//假设我们传递了一个额外的参数“parse:true”
get（“/city list”，{parse:true}）；

在响应拦截器中，我们可以像这样使用它：

axios.interceptors.response.use（（response）=>{
if（response.config.parse）{
//在此处执行操作并更改响应对象
}
返回响应；
}，（错误）=>{
返回承诺.拒绝（错误.消息）；
});

因此，在本例中，每当

response.config

中有

parse

对象时，操作就完成了，对于其余的情况，它将按原样工作

=>您甚至可以查看到达的

HTTP

代码，然后做出决定。例如：

axios.interceptors.response.use（（response）=>{
如果（response.status==401）{
警报（“您未经授权”）；
}
返回响应；
}，（错误）=>{
if（error.response&&error.response.data）{
返回承诺.拒绝（错误.响应.数据）；
}
返回承诺.拒绝（错误.消息）；
});

简单地说，它更像是每个http操作的检查点。所做的每个api调用都通过该拦截器传递

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

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

一些请求拦截器用例-

假设您希望在发出请求之前进行检查，您的凭据是否有效？因此，您可以

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