fetch添加超时时间

转载
https://blog.csdn.net/qq_33323251/article/details/79832689
其实为fetch添加超时时间很简单,需要用到Promise.race()方法.

Promise.race() 方法将多个Promise包装成一个新的Promise实例.

var p = Promise.race([p1,p2,p3]);

上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给p的回调函数.

Promise.race方法的参数如果不是Promise实例,就会先先调用Promise.resolve方法,将参数转为Promise实例,再进一步处理.

Promise.race([
    fetch(URL),
    new Promise(function(resolve,reject){
        setTimeout(()=> reject(new Error('request timeout')),2000)
    })])
    .then((data)=>{
        //请求成功
    }).catch(()=>{
        //请求失败
});

原文链接:https://blog.csdn.net/qq_33323251/article/details/79832689

代码中用Promise.race()将fetch和一个新的Promise包装在了一起,新的Promise和fetch谁率先返回就把该Promise实例返回值传递给下面的.then()或者是.catch()

代码里我们新建的Promise实例里设置了超时时间2000毫秒,如果超过2000毫秒fetch的请求还没有结束,这时已经达到了新的Promise的超时时间,就会返回请求失败,从而触发catch方法里指定的回调函数.

你可能感兴趣的:(项目遇到的问题,javascript,前端,vue.js)