【Axios】关于Axios里的拦截器

1. 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js
环境，它提供了强大的拦截器（interceptors）功能，允许你对请求或响应在它们被应用到 then 或 catch 之前进行拦截和处理。

关于拦截器的使用，可查看官方文档：拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

接下来根据代码解读请求拦截器和响应拦截器。

2.请求拦截器

请求拦截器用于在请求发送到服务器之前对请求进行处理。请求拦截器用于在请求发送到服务器之前对请求进行处理。在 Axios 中，可以使用axios.interceptors.request.use
方法来添加请求拦截器。

2.1 参数解释

• config: 这是一个对象，包含了 Axios 请求的配置信息，具体包括：
  • url: 请求的 URL 地址。
  • method: 请求的 HTTP 方法（如 ‘get’, ‘post’, ‘put’, ‘delete’ 等）。
  • data: 发送的数据，通常用于 ‘post’, ‘put’, ‘patch’ 等请求方法。
  • params: URL 参数对象，用于 get 或 delete 请求中拼接查询字符串。
  • headers: 请求头，可以在这里设置如 Content-Type, Authorization 等。
  • timeout: 请求超时时间，单位为毫秒。
  • withCredentials: 是否携带凭证（如 Cookies 或 Authorization headers），跨域请求时使用。

2.2 拦截器作用

• 修改或添加请求头，例如添加一个通用的认证令牌。
• 根据需要修改请求的 URL、方法或数据。
• 设置请求超时时间。
• 取消请求或在某些条件下不发送请求。

3. 响应拦截器

响应拦截器通过 axios.interceptors.response.use 方法添加，它可以在处理响应之前对响应对象 response
进行处理。

3.1 参数解释

• response: 这是一个对象，包含了从服务器返回的响应信息，具体包括：
  • data: 服务器返回的数据。
  • status: HTTP 状态码。
  • statusText: HTTP 状态信息，例如 ‘OK’, ‘Not Found’ 等。
  • headers: 响应头。
  • config: 发起请求时的配置对象。

3.2 拦截器作用

• 对响应数据进行预处理或转换，比如将 JSON 字符串转换为 JavaScript 对象。
• 处理非 2xx 状态码的错误响应，例如重试请求或抛出错误。 记录日志、监控 API 性能。