Axios 拦截器是 Axios 提供的一种强大功能，允许你在请求发送到服务器之前或响应返回客户端之前对其进行修改或处理。拦截器主要有两种：请求拦截器（request interceptors）和响应拦截器（response interceptors）。
实现原理
-
拦截器数组：
Axios 内部维护了两个数组，一个用于存储请求拦截器，另一个用于存储响应拦截器。每个拦截器都是一个函数，这些函数按照它们在数组中定义的顺序被依次执行。 -
拦截器函数的参数：
- 请求拦截器：通常接收一个配置对象（通常是请求的配置）作为参数，并返回一个配置对象或 Promise。
- 响应拦截器：接收一个响应对象作为参数，并返回一个响应对象或 Promise。
-
拦截器的执行：
- 当 Axios 发起一个请求时，它会首先遍历并执行请求拦截器数组中的每个函数。这些函数可以对请求进行预处理，比如添加请求头、处理错误等。
- 一旦请求被发送并得到响应，Axios 会遍历并执行响应拦截器数组中的每个函数。这些函数可以对响应进行后处理，比如数据转换、错误处理等。
-
Promise 链：
由于拦截器函数可以返回 Promise，因此可以很容易地在拦截器中执行异步操作。Axios 会等待每个拦截器的 Promise 解决后再继续执行后续的拦截器或请求/响应处理。 -
取消拦截器：
Axios 提供了取消拦截器的方法，允许你在不再需要某个拦截器时将其从数组中移除。 -
使用场景：
- 身份验证：在请求拦截器中添加身份验证令牌（token）。
- 错误处理：在响应拦截器中统一处理网络错误或服务器错误。
- 数据转换：在响应拦截器中处理服务器返回的数据，比如解析 JSON 数据或进行其他格式转换。
- 日志记录：在请求和响应拦截器中记录请求的详细信息，以便进行调试或监控。
示例代码
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
注意事项
- 拦截器是按顺序执行的，因此它们的顺序很重要。
- 由于拦截器可以修改请求或响应数据，因此在使用它们时要特别小心，确保不要意外地修改了你不需要修改的数据。
- 如果在拦截器中抛出了错误或返回了一个被拒绝的 Promise，那么后续的拦截器和请求/响应处理将不会被执行。