前端调用后端接口 超时处理 Promise.race() 应用

对于前端来说,需要调用后端的接口来获取数据从而渲染页面,但是有时候由于网络原因等等一切原因,后端接口在5秒被未返回,此时我们就可以给出调用接口超时的error。
在这里使用Promise.race() 来解决。

Promise.race([
    axios.get(url),  //调用后端接口
    new Promise(function(resolve,reject){  //5秒后执行,如果后端接口没有返回,则直接返回error
        setTimeout(()=>{reject(new Error('request timeout')),5000})
    })
    .then((response)=>{
        //成功返回后处理的逻辑
    })
])

Promse.race就是赛跑的意思,Promise.race([p1, p2])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

不过axios中有现成的超时时间设置,这里只是举个例子,还是建议用axios自带的超时设置,简单一点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。