如何基于Promise设计简单的请求/响应拦截器
如何基于Promise设计简单的请求/响应拦截器
【如何基于Promise设计简单的请求/响应拦截器】面试官问你，如何才能设计出像 Axios 这样牛皮的请求和响应拦截器? 能不能简单手写其中的原理
// xhr适配器
var dispatch = (config) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 模拟xhr 结果响应值
resolve('cpp', config);
}, 1000);
});
};
// 请求
function request(config) {
var promise;
var interceptor = {
request: [
(config) => {
console.log(config, 'request config');
return config;
},
(err) => {
console.log(err);
},
],
response: [
(res) => {
console.log(res, 'response res');
return res;
},
(err) => {
console.log(err);
},
],
};
var chain = [dispatch, null];
chain.unshift(...interceptor.request);
// 注意chain数组的前后顺序
chain = chain.concat(interceptor.response);
promise = Promise.resolve(config);
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
}
request({
name: 'CPP REQUEST',
url: 'api/get/data',
}).then((res) => {
console.log(res, 'LAST RES');
});
// 打印结果
// request config
// response res
// cpp LAST RES之前一直不是特别能理解拦截器的核心实现原理，也就是下面这几段代码
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise突然某一个时刻想通了，其实这也是巧妙利用了Promise核心异步链式调用，把上面几行代码改成这样估计都能理解了
var dispatch = (config) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('cpp', config);
}, 1000);
});
};
function request(config) {
var promise;
var interceptor = {
request: [
(config) => {
console.log(config, 'request config');
return config;
},
(err) => {
console.log(err);
},
],
response: [
(res) => {
console.log(res, 'response res');
return res;
},
(err) => {
console.log(err);
},
],
};
var chain = [dispatch, null];
chain.unshift(...interceptor.request);
chain = chain.concat(interceptor.response);
promise = Promise.resolve(config);
// while (chain.length) {
//promise = promise.then(chain.shift(), chain.shift());
// }
return promise.then(chain.shift(), chain.shift()).then(chain.shift(), chain.shift()).then(chain.shift(), chain.shift());
;
}
request({
name: 'CPP REQUEST',
url: '/api/data',
}).then((res) => {
console.log(res, 'LAST RES');
});
// 打印结果
// request config
// response res
// cpp LAST RES推荐阅读
- 纯CSS如何禁止用户复制网页的内容（）
- win7系统如何不待机 设置Win7不待机的技巧
- win7系统大地系统报错0xc0000098要如何处理
- win7系统压缩软件如何完成最小压缩的技巧分享
- 如何按降序对评论进行排序（）
- 如何在没有任何插件的情况下在WordPress single.php下显示YouTube观看次数（）
- 如何从WordPress管理面板中的”添加用户页面”中删除网站字段（）
- 如何覆盖WordPress主题的”functions.php”文件中的插件功能（）
- 如何制作WordPress作者页面模板
- 如何在台式机和移动设备上使图片中的文字动态显示