axios 拦截器的使用

请求拦截器

场景

添加全局的请求头信息

你可能需要在每个请求中添加一些固定的头部信息，如身份验证令牌、用户代理信息等。通过请求拦截器，你可以在请求发送前自动添加这些头部信息。

axios.interceptors.request.use((config) => {
  // 在请求发送前做一些处理
  config.headers.Authorization = "Bearer " + getToken();
  return config;
});

请求参数的处理

你可能需要在每个请求中对参数进行处理，比如在发送请求前对参数进行加密、编码等操作。

axios.interceptors.request.use((config) => {
  // 在请求发送前对参数进行处理
  config.params = encryptParams(config.params);
  return config;
});

全局错误处理

通过请求拦截器，你可以在请求发生错误时进行全局性的错误处理，比如统一处理某些 HTTP 错误状态码。

axios.interceptors.request.use(null, (error) => {
  // 在请求发生错误时进行处理
  return Promise.reject(error);
});

响应拦截器

场景

全局错误处理

通过响应拦截器，你可以在接收到响应时进行全局性的错误处理，例如处理特定的 HTTP 错误状态码或处理服务器返回的特定错误信息。

axios.interceptors.response.use(
  (response) => {
    // 在响应正常时的处理
    return response;
  },
  (error) => {
    // 在响应发生错误时的处理
    if (error.response.status === 401) {
      // 处理身份验证错误
    }
    return Promise.reject(error);
  }
);

全局 Loading 状态管理

你可以利用相应拦截器配合请求拦截器使用，在请求开始时显示 Loading 状态，而在请求完成时隐藏 Loading 状态，实现全局 Loading 的管理。

let loadingInstance;

axios.interceptors.request.use(
  (config) => {
    // 在请求开始时显示Loading
    loadingInstance = showLoading();
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    // 在请求完成时隐藏Loading
    hideLoading(loadingInstance);
    return response;
  },
  (error) => {
    // 在请求发生错误时隐藏Loading
    hideLoading(loadingInstance);
    return Promise.reject(error);
  }
);

统一数据格式处理

你可以使用响应拦截器来统一处理服务器返回的数据格式，例如提取特定的数据字段或进行一些通用的数据转换操作。

axios.interceptors.response.use(
  (response) => {
    // 统一处理响应数据格式
    return response.data.result;
  },
  (error) => {
    return Promise.reject(error);
  }
);

刷新身份验证令牌

在响应拦截器中，你可以检查响应头或响应数据，以确定是否需要刷新身份验证令牌，并在必要时执行刷新操作。

axios.interceptors.response.use(
  (response) => {
    // 检查响应头或响应数据，判断是否需要刷新令牌
    if (response.headers["token-expired"]) {
      // 刷新令牌
      return refreshAccessToken().then((newToken) => {
        // 更新请求的 Authorization 头部
        response.config.headers.Authorization = "Bearer " + newToken;
        return axios(response.config); // 重新发起原始请求
      });
    }
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);