Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 node.js 中执行 HTTP 请求。它具备拦截请求和响应的能力,这使得开发者可以在请求被发送到服务器前或响应被传递给 then/catch 方法前,对其进行处理或修改。拦截器是 Axios 非常强大的特性之一,它们主要被用于日志记录、身份验证、如果请求失败时的重试机制等功能;允许你在请求发送到服务器之前或响应返回客户端之前对其进行修改或处理。
拦截器主要有两种:请求拦截器(request interceptors)和响应拦截器(response interceptors)。
响应拦截器:
fulfilled
和 rejected
函数的对象。这两个函数分别对应于拦截器成功处理和拦截器处理出错的情况。
// 添加请求拦截器
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);
});
class InterceptorManager {
constructor() {
this.handlers = []; // 存储拦截器的数组
}
use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1; // 返回拦截器的ID
}
eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null; // 移除拦截器
}
}
forEach(fn) {
this.handlers.forEach((h) => {
if (h !== null) {
fn(h);
}
});
}
}
在发送请求或接收响应时,Axios 会创建一个 promise 链,并通过 forEach
方法将拦截器中的 fulfilled
和 rejected
函数添加到这个链中。这样,每个拦截器都可以对请求或响应进行处理,然后将结果传递到链的下一个拦截器,或者在出错时结束链的执行。