利用promise实现一个超时请求处理

今天面试官问的我这个问题&＃xff0c;说实话&＃xff0c;我当时懵逼了。
我第一个想法竟然是&＃xff1a;嘶~这问题挺简单的啊&＃xff0c;不就是用 Date 对象判断是否大于某个时间差么&＃xff1f;于是写出了下面这段代码&＃xff1a;

let rest&＃61;function(){// 开始是放在外面的&＃xff0c;但是面试官说要尽可能不单独暴露值&＃xff0c;于是鬼迷心窍&＃xff08;紧张&＃xff09;杀都没想就直接扔进来了...let date&＃61;Date.now();return new Promise((resolve,reject)&＃61;>{let _date&＃61;Date.now();if(_date-date>2000){reject(&＃39;请求超时&＃39;);}resolve();})
}


在我暗自得意是不是快结束了面试官一会儿会如何告诉我面试通过了的时候&＃xff0c;对面突然传来一句话&＃xff1a;
“你这个,确定要这样&＃xff1f;”
“你这样if条件真的会执行么&＃xff1f;”

我顿时感觉大事不妙大惊失色&＃xff0c;正要仔细看时面试官已经说出了“行吧&＃xff0c;这道题你再想想&＃xff0c;这次的面试就到这里吧”

下来后仔细想想&＃xff0c;“基于promise”的前提就已经提示了应该要“尽可能地应用promise的特性”&＃xff0c;那么&＃xff0c;这个问题应该用什么呢&＃xff1f;

我想起了前两天写过的这篇文章&＃xff1a;实现一个“能中断的”ajax 。里面提到了可以用 “ reject抢跑 ”的方法去中止后续回调的执行&＃xff01;

这里要记得一点&＃xff1a;promise状态值改变一旦触发就不可逆&＃xff0c;所以不可能真正“中断”promise&＃xff0c;只能说通过同步与异步的先后规则&＃xff08;event Loop&＃xff09;去让“成功”的回调无法执行。

我似乎恍然大悟了起来…

但现在还有一个问题&＃xff1a;怎么判断“超时”&＃xff1f;
如果不出意外&＃xff0c;你把两个 Date 放在一个函数中无论如何它们的值都是相同的&＃xff01;所以我想到了 setTimeout &＃xff01;有了这个异步时间处理&＃xff0c;我的思路就明朗了起来&＃xff1a;在promise中有一个API叫&＃xff1a;Promise.race() &＃xff0c;和 all() 不同的是&＃xff0c;race在其中promise状态值有一个改变时就会立刻执行它的结果&＃xff0c;就像这样&＃xff1a;

let rest&＃61;function(_data&＃61;1000){return Promise.race([upload().then(data&＃61;>{console.log(data.data)}),uploadTimeout(_data)])
}
function upload(){console.log(&＃39;请求进行中...&＃39;);return new Promise((resolve,reject)&＃61;>{let xhr&＃61;new XMLHttpRequest();xhr.open(&＃39;GET&＃39;,"https://devapi.qweather.com/v7/weather/24h?location&＃61;这里是纬度和经度英文逗号分搁&key&＃61;这里是百度地图的key");xhr.onload&＃61;function(){if(xhr.readyState&＃61;&＃61;4 && (xhr.status>&＃61;200 && xhr.status<300)){setTimeout(()&＃61;>{resolve({data:JSON.parse(xhr.responseText)})},2000)}else{reject(xhr.status)}}xhr.onerror&＃61;function(){reject(&＃39;请求失败了...&＃39;)}xhr.send(null);// 【1】})
};
function uploadTimeout(times){return new Promise((resolve,reject)&＃61;>{setTimeout(()&＃61;>{reject(&＃39;请求超时&＃xff0c;请重试&＃39;); // 【2】},times)})
}


到这里&＃xff0c;基本实现了功能&＃xff0c;但是运行后你会发现&＃xff1a;第一个函数在报错后仍然执行了&＃xff01;
对&＃xff0c;这就是上面说的&＃xff1a;promise状态值改变的过程是不可逆的。而且虽然你下面返回了reject&＃xff0c;但是这是两个promise&＃xff0c;之间是不冲突的&＃xff01;

受上面说过的 reject抢跑 的启发&＃xff0c;我们可以在代码中标注为【1】的地方写这样的代码&＃xff1a;

// 向外暴露取消函数
cancelFn&＃61;function(msg){reject(&＃39;请求超时&＃xff0c;请重试&＃39;);
}


然后将代码中标注为【2】的地方的代码替换为&＃xff1a;

cancelFn();


至此&＃xff0c;一个“超时请求处理”的功能就真的实现了&＃xff1a;