Axios拦截器在项目中所扮演的角色是非常重要的，它可以拦截每一次的请求和响应，然后进行相应的处理。经阅读其源码，不禁被作者的神级思维所折服！简直是将Promise用到了极致！
1、声明一个用于拦截器管理的构造函数
// 声明拦截器管理构造函数
function InterceptorManager(){
// 用于存放Axios拦截行为及数据请求的Promise链条
this.handlers = [];
}
// 增加拦截器
InterceptorManager.prototype.use = function (fulfilled,rejected) {
this.handlers.push({
fulfilled,
rejected
})
}2、Axios 构造函数中增加 interceptors
function Axios(instanceConfig){
// defaults 属性为配置对象
this.defaults = instanceConfig;
// interceptors 属性用来设置请求和响应拦截器
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager(),
}
}3、对之前封装好的 request 进行调整
Axios.prototype.request = function (config) {
function dispatchRequest(){
// 发送xhr请求……
}
// dispatchRequest 发送请求，undefined 用来补位
var chain = [dispatchRequest, undefined];
// 遍历实例对象的请求拦截器
this.interceptors.request.handlers.forEach(interceptor=>{
// 将请求拦截器压入数组的最前面
chain.unshift(interceptor.fulfilled,interceptor.rejected)
})
// 遍历实例对象的响应拦截器
this.interceptors.response.handlers.forEach(interceptor=>{
// 将请求拦截器压入数组的最后面
chain.push(interceptor.fulfilled,interceptor.rejected);
})
// 创建一个成功的 promise 且成功的值为合并后的请求配置
let promise = Promise.resolve(config);
// 如果链条长度不为 0
while (chain.length){
// 依次取出 chain 的回调函数, 并执行
promise = promise.then(chain.shift(),chain.shift())
}
return promise;
}4、完整代码
// 声明拦截器管理构造函数
function InterceptorManager(){
// 用于存放Axios拦截行为及数据请求的Promise链条
this.handlers = [];
}
// 增加拦截器
InterceptorManager.prototype.use = function (fulfilled,rejected) {
this.handlers.push({
fulfilled,
rejected
})
}
function Axios(instanceConfig){
// defaults 属性为配置对象
this.defaults = instanceConfig;
// interceptors 属性用来设置请求和响应拦截器
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager(),
}
}
Axios.prototype.request = function (config) {
function dispatchRequest(){
// 将请求方式全部转为大写
const method = (config.method || "get").toUpperCase();
// 返回Promise
return new Promise((resolve,reject)=>{
// 声明xhr
const xhr = new XMLHttpRequest();
// 定义一个onreadystatechange监听事件
xhr.onreadystatechange = function () {
// 数据全部加载完成
if(xhr.readyState === 4){
// 判断状态码是否正确
if(xhr.status >= 200 && xhr.status < 300){
// 得到响应体的内容
const data = JSON.parse(xhr.responseText);
// 得到响应头
const headers = xhr.getAllResponseHeaders();
// request 即是 xhr
const request = xhr;
// 状态码
const status = xhr.status;
// 状态码的说明
const statusText = xhr.statusText
resolve({
config,
data,
headers,
request,
status,
statusText
});
}else{
reject("请求失败"+xhr.status+xhr.statusText);
}
}
}
// http://127.0.0.1/two?a=1&b=2
// 判断是否拥有params,且类型为object
if(typeof config.params === "object"){
// 将object 转为 urlencoded {a:1,b:2} a=1&b=2
// ["a","b"]
const arr = Object.keys(config.params);
// ["a=1","b=2"]
const arr2 = arr.map(v=>v+"="+config.params[v]);
// a=1&b=2
const url = arr2.join("&");
// config.url = config.url + "?" + url;
config.url += "?" + url;
}
xhr.open(method,config.url);
// post put patch
if(method === "POST" || method === "PUT" || method === "PATCH"){
if(typeof config.data === "object")
xhr.setRequestHeader("content-type","application/json");
else if(typeof config.data === "string")
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(JSON.stringify(config.data));
}else{
xhr.send();
}
})
}
// dispatchRequest 发送请求，undefined 用来补位
var chain = [dispatchRequest, undefined];
// 遍历实例对象的请求拦截器
this.interceptors.request.handlers.forEach(interceptor=>{
// 将请求拦截器压入数组的最前面
chain.unshift(interceptor.fulfilled,interceptor.rejected)
})
// 遍历实例对象的响应拦截器
this.interceptors.response.handlers.forEach(interceptor=>{
// 将请求拦截器压入数组的最后面
chain.push(interceptor.fulfilled,interceptor.rejected);
})
// 创建一个成功的 promise 且成功的值为合并后的请求配置
let promise = Promise.resolve(config);
// 如果链条长度不为 0
while (chain.length){
// 依次取出 chain 的回调函数, 并执行
promise = promise.then(chain.shift(),chain.shift())
}
return promise;
}
// axios 本质不是Axios构造函数的实例，而是一个函数对象。函数是request
function createInstance(defaultConfig){
const context = new Axios(defaultConfig);
Axios.prototype.request.bind(context);
// instance 是一个函数。该函数是request,并且内部this指向context.
var instance = Axios.prototype.request.bind(context);// 等同于上面那行代码
// 将Axios的原型方法放置到instance函数属性中
Object.keys(Axios.prototype).forEach(method=>{
instance[method] = Axios.prototype[method].bind(context)
})
Object.keys(context).forEach(attr=>{
instance[attr] = context[attr];
})
return instance;
}
export default createInstance;5、测试
// 两个请求
axios.interceptors.request.use(config=>{
console.log("request1");
return config;
},error=>{
console.log("request1",error)
return Promise.reject(error);
})
axios.interceptors.request.use(config=>{
console.log("request2");
// throw "异常呀"
return config;
},error=>{
return Promise.reject(error);
})
// 两个响应
axios.interceptors.response.use(res=>{
console.log("response1");
return res;
},error=>{
return Promise.reject(error)
})
axios.interceptors.response.use(res=>{
console.log("response2",res);
return res.data;
},error=>{
return Promise.reject(error)
})
// 发送请求
axios.request({
url:"data.json",
method:"post",
data:{
a:1,
b:2
}
}).then(value=>{
console.log(11111,value);
}).catch(err=>{
console.log(err);
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
