使用 axios 库写个拦截器

在使用 Axios 库进行 HTTP 请求时，拦截器是非常有用的功能，可以用来在请求或响应被发送之前或之后对其进行拦截和修改。在编写拦截器时，需要考虑以下几个场景：

1. 全局请求拦截：当发送任何请求时，可以在请求被发送之前拦截它并进行一些处理。例如，可以为每个请求添加一个授权头或修改请求参数。

2. 全局响应拦截：当收到任何响应时，可以在响应被处理之前拦截它并进行一些处理。例如，可以检查响应状态码并进行相应的处理。

3. 请求失败拦截：当请求失败时，可以拦截请求并进行一些处理。例如，可以显示一个错误消息或者重新发送请求。

在处理这些场景时，可以使用 Axios 提供的拦截器功能。下面是一个示例，演示如何在 Axios 中编写全局请求和响应拦截器：

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  function (error) {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  function (response) {
    // 在响应数据之前做些什么
    if (response.status === 401) {
      // 未授权，跳转到登录页面
      window.location.href = '/login';
    }
    return response;
  },
  function (error) {
    // 处理响应错误
    return Promise.reject(error);
  }
);

在上面的示例中，首先使用 axios.create() 方法创建一个 Axios 实例，并设置 baseURL 为 API 的根路径。然后使用 interceptors.request.use() 方法添加一个请求拦截器，该拦截器会在发送请求之前将授权头添加到请求中。使用 interceptors.response.use() 方法添加一个响应拦截器，该拦截器会在处理响应之前检查响应状态码，如果状态码为 401，则跳转到登录页面。

需要注意的是，拦截器是一个链式调用，可以添加多个拦截器。在链式调用中，每个拦截器可以对请求或响应进行修改或处理，并将其传递给下一个拦截器。在添加拦截器时，需要注意遵循 Axios 的规则和顺序，以确保拦截器正确地处理请求和响应。