javascript - 如何使用 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 Action 的检查点。已进行的每个 API 调用都通过此拦截器传递。

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

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

一些请求拦截器用例-

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

假设您需要为每个发出的请求附加一个 token ，而不是在每次 Axios 调用时复制 token 添加逻辑，您可以制作一个拦截器，为发出的每个请求附加一个 token 。

一些响应拦截器用例-

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

假设您已使用有效的 API 凭据请求了一些 API，但您没有访问数据的有效 Angular 色。因此，您可以从响应拦截器触发一个警告，说明该用户是不允许的。这样一来，您就可以避免未经授权的 API 错误处理，您必须对您发出的每个 Axios 请求执行这种处理。

下面是一些代码示例

请求拦截器

• 可以通过以下方式打印 axios 的配置对象(如果需要)(在这种情况下，通过检查环境变量):

  const DEBUG = process.env.NODE_ENV === "development";
  
  axios.interceptors.request.use((config) => {
      /** In dev, intercepts request and logs it into console for dev */
      if (DEBUG) { console.info("✉️ ", config); }
      return config;
  }, (error) => {
      if (DEBUG) { console.error("✉️ ", error); }
      return Promise.reject(error);
  });
  

• 如果想检查正在传递的 header /添加更多通用 header ，可以在 config.headers 对象中使用。例如:

  axios.interceptors.request.use((config) => {
      config.headers.genericKey = "someGenericValue";
      return config;
  }, (error) => {
      return Promise.reject(error);
  });
  

• 如果是 GET 请求，发送的查询参数可以在 config.params 对象中找到。

响应拦截器

• 您甚至可以有选择地在拦截器级别解析 API 响应，并将解析后的响应而不是原始响应向下传递。如果 API 在多个地方以相同的方式使用，它可能会节省您一次又一次地编写解析逻辑的时间。一种方法是在 api-request 中传递一个额外的参数，并在响应拦截器中使用相同的参数来执行您的操作。例如:

  //Assume we pass an extra parameter "parse: true" 
  axios.get("/city-list", { parse: true });
  

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

  axios.interceptors.response.use((response) => {
      if (response.config.parse) {
          //perform the manipulation here and change the response object
      }
      return response;
  }, (error) => {
      return Promise.reject(error.message);
  });
  

  因此，在这种情况下，每当 response.config 中有一个 parse 对象时，操作就完成了，对于其余情况，它将起作用原样。

• 您甚至可以查看到达的 HTTP 代码，然后做出决定。例如:

  axios.interceptors.response.use((response) => {
      if(response.status === 401) {
           alert("You are not authorized");
      }
      return response;
  }, (error) => {
      if (error.response && error.response.data) {
          return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
  });