利用Promise判断请求图片超时，Promise.race

最新推荐文章于 2025-06-17 07:23:59 发布

原创最新推荐文章于 2025-06-17 07:23:59 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

19 篇文章

订阅专栏

文章介绍了如何利用Promise的race方法来并行执行异步操作，特别是如何为图片请求设置超时。当请求Img和timeout两个Promise中任何一个先完成时，会触发then或catch。如果图片在5秒内未加载，则会捕获到图片请求超时的错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise的all方法和race方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
all方法的效果：「谁跑的慢，以谁为准执行回调」
race方法的效果： 「谁跑的快，以谁为准执行回调」
用race给某个异步请求设置超时时间，并且在超时后执行相应的操作：

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});