Axios 拦截器的介绍和使用

Question

Axios 拦截器 是 Axios 为每个请求调用的函数。 您可以使用拦截器在 Axios 发送请求之前转换请求，或者在 Axios 将响应返回给您的代码之前转换响应。 您可以将拦截器视为 Axios 中的中间件，相当于 Express 或 Mongoose 。

将每个请求打印到控制台

开始使用拦截器的最简单方法是编写一个 console.log() 的每个 HTTP 请求。 由于 Axios 为你调用拦截器，你只需要编写一个拦截器，而不是调用 console.log() 每次。

const axios = require('axios');

axios.interceptors.request.use(req => {
  console.log(`${req.method} ${req.url}`);
  // Important: request interceptors **must** return the request.
  return req;
});

// Prints "get https://httpbin.org/get"
await axios.get('https://httpbin.org/get');

// Prints "post https://httpbin.org/post"
await axios.post('https://httpbin.org/post', {});

将每个响应打印到控制台

拦截器有两种类型：请求拦截器和响应拦截器。 前面的例子是一个请求拦截器。 Axios 之前 ，所以可以使用请求拦截器来修改请求。 Axios 在发送请求并收到响应后调用响应拦截器。 这 res 拦截器的参数是 Axios 响应对象，与执行时获得的对象相同 await axios.get(). 下面是一个打印响应的简单响应拦截器。

const axios = require('axios');

axios.interceptors.request.use(req => {
  console.log(`${req.method} ${req.url}`);
  // Important: request interceptors **must** return the request.
  return req;
});

axios.interceptors.response.use(res => {
  console.log(res.data.json);
  // Important: response interceptors **must** return the response.
  return res;
});

// Prints "post https://httpbin.org/post" followed by "{ answer: 42 }"
await axios.post('https://httpbin.org/post', { answer: 42 });

自动设置 授权标头

拦截器最常见的用例之一是处理授权。 通常，客户端应用程序向服务器证明用户已登录的方式是在授权标头中发送一个秘密令牌。 拦截器让你设置 authorization 在所有请求上自动标头，如下所示。

axios.interceptors.request.use(req => {
  // `req` is the Axios request config, so you can modify
  // the `headers`.
  req.headers.authorization = 'my secret token';
  return req;
});

// Automatically sets the authorization header because
// of the request interceptor
const res = await axios.get('https://httpbin.org/get');

错误处理

响应拦截器还可以让您处理错误。 这很重要，因为 Axios 的默认错误消息是 Request failed with status code 404，这通常不是您想要显示给最终用户的内容。 这 axios.interceptors.response.use() 函数有 2 个函数参数： successHandler 和 errorHandler。Axios 调用 successHandler 如果请求成功，或者 errorHandler 如果请求失败。 你可以自己写 errorHandler 转换错误，如下所示。 只要确保在你的 errorHandler，否则 Axios 会将其视为成功请求！

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response.status === 404) {
      throw new Error(`${err.config.url} not found`);
    }
    throw err;
  }
);

// Automatically sets the authorization header because
// of the request interceptor
const err = await axios.get('https://httpbin.org/status/404').
  then(() => null, err => err);

err.message; // "https://httpbin.org/status/404 not found"