客户端轮询后台接口

流水帐++
场景： 前端提交数据后，后台开始检查，并返回结果。但结果返回是异步的，决定5秒轮询一次后台，3次没返回就让用户稍后再访问

处理思路：第一反应肯定是使用 setInterval , 但在之前对setInterval有不太好的使用体验与印象，所以还是上网看了看有没更好的方案。方案有两个，一是使用setTimeout, 一是用长连接。并不想开长连接，所以选择用第一个setTimeout，这个方案其实也简单，代码也容易看懂。

注意事项： 使用 setTimeout 或 setInterval 一定记得页面销毁时要执行清除操作

以下代码仅作参考，只是片断（小程序代码）：

data() {
    return {
        ...,
        fetchTimes:0,
        timeoutIds:[],
    }
},

onLoad(){  
  fetchResult()
},

fetchResult(){
    const resp = await uni.request({
            url: API.check,  
            method: "GET",
        });
    const [err, res] = resp
    if(res.data.state==="checking"){
        this.fetchTimes++  // 次数++
        if(this.fetchTimes<3){ //只向后台发起3次请求，
            let timeId =setTimeout( ()=>{
                this.fetchData()
            }, 5*1000)  // 5秒一次
            this.timeoutIds.push(timeId)
        }else{
            uni.showModal({
                title: '检测中，可以稍后再查看哦~。',
            });
        }
    }else{
        // do sth ...
    }
},

onUnload() {
    this.timeoutIds.foreach( id=>{
        clearTimeout(id)
    })
},

参考

1. 前端轮询方案与 ReactHook 实践
2. 小程序中setTimeout轮询判断数据更新后跳转