关于http:如何基于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