封装axios，请求拦截做了什么，响应拦截又做了什么

1. 请求拦截器

请求拦截器用于在请求发送到服务器之前，对请求做一些预处理，常见的处理包括：

• 添加公共请求头：例如在请求头中加入 Authorization，用于携带认证信息（如 token）。
• 参数处理：对传入的参数进行格式化、序列化、或编码等操作。
• 请求超时设置：可以根据需求在请求中设置不同的超时时间。
• 请求日志记录：在开发环境中打印请求日志，以便调试和跟踪。
• 其他操作：例如在发起请求前检查是否存在 token，有的话则附加到请求头中；或检查请求是否符合一些业务逻辑等。

示例代码：

javascript
复制代码
axios.interceptors.request.use(
  config => {
    // 添加 token 到请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    
    // 其他请求配置
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

2. 响应拦截器

响应拦截器用于在接收到服务器的响应之后，对响应结果进行统一处理。常见的处理包括：

• 统一处理响应数据：对响应数据进行结构化或解包，便于调用方处理。
• 错误处理：捕获请求错误或状态码异常的情况，例如 401（未授权），403（权限不足），500（服务器错误）等，根据错误类型做不同处理。
• 刷新 Token：如果服务端返回的状态码表示 token 过期（例如 401），可以在此发起 token 刷新请求并重新发送原请求。
• 返回数据包装：例如，直接返回业务数据部分而不返回整个响应对象。

示例代码：

javascript
复制代码
axios.interceptors.response.use(
  response => {
    // 对响应数据做统一处理
    const data = response.data;
    if (data.success) {
      return data.result; // 只返回业务数据部分
    } else {
      return Promise.reject(data.message); // 抛出错误信息
    }
  },
  error => {
    if (error.response) {
      const status = error.response.status;
      if (status === 401) {
        // 处理未授权错误，可能需要跳转到登录页
      } else if (status === 403) {
        // 处理权限不足的错误
      } else {
        // 处理其他类型的错误
      }
    }
    return Promise.reject(error);
  }
);

总结

• 请求拦截器：在请求发出前处理请求头、参数等，添加认证信息。
• 响应拦截器：统一处理响应数据和错误状态，便于管理和错误处理。