Promise.race的用法

最新推荐文章于 2025-12-02 16:44:52 发布

原创最新推荐文章于 2025-12-02 16:44:52 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端开发专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用 Promise.race 方法实现接口请求超时处理，通过对比两种不同的实现方式，阐述正确使用 Promise.race 的关键在于避免直接在 Promise 任务中进行输出操作。

最近做项目让增加一个功能，当接口请求超过5分钟后，做个处理页面增加错误提示，于是想到了Promise.race的方法，下面来记录一下~

let P1 = new Promise( resolve => {
    setTimeout(()=> {
                resolve('p1访问！')
            },4000)
});
let P2 = new Promise( (resolve,reject) => {
    setTimeout(()=> {
        reject({message:'您所选择的数据量过大，请缩小时间范围或联系XXX进行处理。'})
            },1000)
});
Promise.race([P1 , P2])
.then(value => {
    console.log(value)
}).catch((error) => {
            console.log(error.message,'error')
        });
//输出：您所选择的数据量过大，请缩小时间范围或联系XXX进行处理。
//当发起请求时任务p1、p2同时开始，当有一个有返回值时，执行then()操作或者catch()错误异常,其他的中断。切记不可直接直接在p1\p2任务里直接操作，不然任务都会执行完毕，就会出现以下的情况：
let P1 = new Promise( resolve => {
    setTimeout(()=> {
                console.log('p1访问！')   
            },4000)
});
let P2 = new Promise( (resolve,reject) => {
    setTimeout(()=> {
        console.log('p2访问！')        
})
            },1000)
});
Promise.race([P1 , P2])
.then(value => {
    console.log(value)
}).catch((error) => {
            console.log(error.message,'error')
        });
//输出：p2访问！ p1访问！

我这里适用第一种，看情况自己选择合适的使用即可~