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

例如，如果要捕获从发送请求到接收响应之间的时间，可以使用以下代码：

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 2

这就像一个中间件，但是添加到任何请求（无论是GET，POST，PUT，DELETE）还是任何响应（从服务器获得的响应）上。它通常用于涉及授权的情况。

看看这个：Axios interceptors and asynchronous login

这是另一篇关于此的文章，其示例不同：https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0

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

Answer 3

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

那么，为什么要使用两个拦截器？

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

某些请求拦截器用例-

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

假设您需要将令牌附加到每个请求，而不是在每个axios调用中复制令牌添加逻辑，您可以制作一个拦截器，在每个请求上附加一个令牌。

一些响应拦截器用例-

假设您收到一个响应，然后根据要确定用户已登录的api响应进行判断。因此，在响应拦截器中，您可以初始化一个处理用户登录状态的类，并在该类上进行相应的更新。您收到的响应对象。

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

现在可以提出这些用例。

希望这会有所帮助：）

Answer 4

这个怎么样。您创建一个新的 Axios 实例并为其附加一个拦截器。然后你可以在你的应用程序的任何地方使用这个拦截器

export const axiosAuth = axios.create()

//we intercept every requests 
axiosAuth.interceptors.request.use(async function(config){
    //anything you want to attach to the requests such as token 
    return config;
}, error => {
    return Promise.reject(error)
})


//we intercept every response
axiosAuth.interceptors.request.use(async function(config){
    
    return config;
}, error => {
//check for authentication or anything like that
    return Promise.reject(error)
})

然后您使用 axiosAuth 的方式与使用 axios 的方式相同

如何使用axios拦截器？

4 个答案: