业务背景,在付款码支付的场景中,用户亮码收银人员扫码下单,这个时候会出现用户来不及输密码,后端的接口已经返回数据,后端返回数据的响应码是非成功状态时候页面的弹框无法自动关闭,这个时候需要前端取轮询后端接口,查询支付状态,根据支付状态自动关闭弹框。传统方式使用setTimeout配合回调函数,定时轮询,这种方式对于轮询次数无法控制,且还要处理定时器清除的等诸多问题,今天尝试使用Promise一步编程实现。
一、LoopSleep类定义
class LoopSleep{
constructor(sec,count) {
this.sec = sec ///阻塞时长 秒
this.count = count /// 任务执行次数
}
/**睡眠函数*/
sleep() {
return new Promise(resolve => setTimeout(resolve,this.sec));
}
/**异步函数调用 async与await 要承兑出现 */
async handleApi(callback){
console.log("handleApi--start->"+(new Date()));
for (let i=0;i<this.count;i++){
await this.sleep()
console.log("指行轮询第"+i+"次")
//执行业务的函数
callback()
}
console.log("handleApi--end->"+(new Date()));
}
}
二、模拟调用
let httpGetData=()=>{
///调用后端接口
/// console.log("调用接口处理页面逻辑");
}
/// 睡眠5s,轮询6,整个过程耗时30s
let loopSleep = new LoopSleep(5000,6)
loopSleep.handleApi(httpGetData)
30s轮询任务执行完毕