前端调用后端接口 超时处理 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自带的超时设置，简单一点。