如何基于Promise设计一个简单的请求/响应拦截器面试官问你，你如何设计一个像Axios这样牛皮的请求/响应拦截器？能不能简单手写原理//xhradaptervardispatch=(config)=>{returnnewPromise((resolve,reject)=>{setTimeout(()=>{//模拟xhr结果响应值resolve('cpp',config);},1000);});};//请求函数request(config){varpromise;varinterceptor={request:[(config)=>{console.log(config,'requestconfig');返回配置；},(err)=>{console.log(err);},],响应:[(res)=>{console.log(res,'responseres');返回资源；},(err)=>{console.log(err);},],};varchain=[dispatch,null];chain.unshift(...拦截器.request);//注意链数组的顺序chain=chain.concat(interceptor.response);promise=Promise.resolve(配置);while(chain.length){promise=promise.然后(chain.shift(),chain.shift());}返回承诺；}request({name:'CPPREQUEST',你rl:'api/get/data',}).then((res)=>{console.log(res,'LASTRES');});//printresult//requestconfig//responseres//cppLASTRES之前一直不是特别能理解拦截器的核心实现原理，也就是下面这段代码while(chain.length){promise=promise.then(chain.shift(),chain.shift());返回承诺在某个时刻突然想通了。其实这也是对Promise核心异步链调用的巧妙利用。把上面几行代码改成这样。估计你能看懂。vardispatch=(config)=>{returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve('cpp',config);},1000);});};functionrequest(配置）{var承诺；varinterceptor={request:[(config)=>{console.log(config,'requestconfig');返回配置；},(err)=>{console.log(err);},],响应:[(res)=>{console.日志（res，'响应res'）;返回资源；},(err)=>{控制台。日志（错误）；},],};varchain=[dispatch,null];链。unshift(...拦截器。请求);链=链。连接（内部受体.反应）；promise=Promise.resolve(配置);//while(chain.length){//promise=promise.then(chain.shift(),chain.shift());//}returnpromise.then(chain.shift(),chain.shift()).then(chain.shift(),chain.shift()).then(chain.shift(),chain.shift());;}request({name:'CPPREQUEST',url:'/api/data',}).then((res)=>{console.log(res,'LASTRES');});//打印结果//requestconfig//responseres//cppLASTRES
