1. 请求拦截器
请求拦截器用于在请求发送到服务器之前，对请求做一些预处理，常见的处理包括：
- 添加公共请求头：例如在请求头中加入
Authorization，用于携带认证信息（如 token）。 - 参数处理：对传入的参数进行格式化、序列化、或编码等操作。
- 请求超时设置：可以根据需求在请求中设置不同的超时时间。
- 请求日志记录：在开发环境中打印请求日志，以便调试和跟踪。
- 其他操作：例如在发起请求前检查是否存在 token，有的话则附加到请求头中；或检查请求是否符合一些业务逻辑等。
示例代码：
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 刷新请求并重新发送原请求。
- 返回数据包装：例如，直接返回业务数据部分而不返回整个响应对象。
示例代码：
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);}
);
总结
- 请求拦截器：在请求发出前处理请求头、参数等，添加认证信息。
- 响应拦截器：统一处理响应数据和错误状态，便于管理和错误处理。
