fetch添加超时时间只需几行代码--fetch timeout

其实为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(()=>{
        //请求失败
});

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

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

亲测有效,不清楚的可以在下面留言.