js中Promise.all、Promise.race

最新推荐文章于 2024-05-06 08:42:46 发布

水星灭绝

最新推荐文章于 2024-05-06 08:42:46 发布

阅读量234

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/112608670

版权

前端同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

121 篇文章 3 订阅

订阅专栏

一、Pomise.all的使用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

二、Promise.race的使用

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

例子：

const log = console.log;

function getNowTime(now) {
    let tm = new Date(now);
    let arr = [tm.getHours(), tm.getMinutes(), tm.getSeconds()];
    return arr.join(":");
}



let p1 = function(n) {
    return new Promise((resolve, reject) => {
        log(n, ", create- p1 ", getNowTime(Date.now()));
        setTimeout(() => {
            log(n, ", p1 timeout ", getNowTime(Date.now()));
            resolve(n + " resolve p1 " + getNowTime(Date.now()));
        }, 3000);
    });
}

let p2 = function(n) {
    return new Promise((resolve, reject) => {
        log(n, ", create p2 ", getNowTime(Date.now()));
        setTimeout(() => {
            log(n, ", p2 timeout ", getNowTime(Date.now()));
            resolve(n + " resolve p2 " + getNowTime(Date.now()));
        }, 1000);
    });
}

let p3 = function(n) {
    return new Promise((resolve, reject) => {
        log(n, ", create p3 ", getNowTime(Date.now()));
        setTimeout(() => {
            log(n, ", p3 timeout ", getNowTime(Date.now()));
            reject(n + ", p3 throw error");
        }, 4500);
    });
}

async function asCall() {
    log("test all normal-----等所有的执行完返回结果-------", getNowTime(Date.now()));
    let normal = "normal";
    await Promise.all([p1(normal), p2(normal)]).then((result) => {
        log("an all result = ", result, ", ", getNowTime(Date.now()));
    }).catch(function(e) {
        log("an all catch e = ", e, ", ", getNowTime(Date.now()));
    }).finally(function() {
        log("an all finally ", getNowTime(Date.now()));
    });

    log("\n\n test all catch------碰到reject的就结束，不再执行then，直接执行catch------", getNowTime(Date.now()));
    let allC = "allC";
    await Promise.all([p1(allC), p3(allC), p2(allC)]).then((result) => {
        log("ac all result = ", result, ", ", getNowTime(Date.now()));
    }).catch(function(e) {
        log("ac all catch e = ", e, ", ", getNowTime(Date.now()));
    }).finally(function() {
        log("ac all finally ", getNowTime(Date.now()));
    });

    log("\n\n test race normal-----哪个先执行完，就返回它的结果，其它结果抛弃---------", getNowTime(Date.now()));
    let raceN = "raceN"
    await Promise.race([p1(raceN), p2(raceN)]).then((result) => {
        log("rn result = ", result, ", ", getNowTime(Date.now()));
    }).catch((e) => {
        log("rn catch e = ", e, ", ", getNowTime(Date.now()));
    }).finally(() => {
        log("rn finally ", getNowTime(Date.now()));
    });

    log("\n\n test race catch ----reject也没有优先权。哪个先执行完就跑哪个---------", getNowTime(Date.now()));
    let raceC = "raceC";
    await Promise.race([p1(raceC), p3(raceC), p2(raceC)]).then((result) => {
        log("rc result = ", result, ", ", getNowTime(Date.now()));
    }).catch((e) => {
        log("rc catch e = ", e, ", ", getNowTime(Date.now()));
    }).finally(() => {
        log("rc finally ", getNowTime(Date.now()));
    });

    log("ascall end----");
}

asCall();
log("main__end");

结果：

$ node proall.js
test all normal-----等所有的执行完返回结果------- 13:22:29
normal , create- p1  13:22:29
normal , create p2  13:22:29
main__end
normal , p2 timeout  13:22:30
normal , p1 timeout  13:22:32
an all result =  [ 'normal resolve p1 13:22:32', 'normal resolve p2 13:22:30' ] ,  13:22:32
an all finally  13:22:32


 test all catch------碰到reject的就结束，不再执行then，直接执行catch------ 13:22:32
allC , create- p1  13:22:32
allC , create p3  13:22:32
allC , create p2  13:22:32
allC , p2 timeout  13:22:33
allC , p1 timeout  13:22:35
allC , p3 timeout  13:22:37
ac all catch e =  allC, p3 throw error ,  13:22:37
ac all finally  13:22:37


 test race normal-----哪个先执行完，就返回它的结果，其它结果抛弃--------- 13:22:37
raceN , create- p1  13:22:37
raceN , create p2  13:22:37
raceN , p2 timeout  13:22:38
rn result =  raceN resolve p2 13:22:38 ,  13:22:38
rn finally  13:22:38


 test race catch ----reject也没有优先权。哪个先执行完就跑哪个--------- 13:22:38
raceC , create- p1  13:22:38
raceC , create p3  13:22:38
raceC , create p2  13:22:38
raceC , p2 timeout  13:22:39
rc result =  raceC resolve p2 13:22:39 ,  13:22:39
rc finally  13:22:39
ascall end----
raceN , p1 timeout  13:22:40
raceC , p1 timeout  13:22:41
raceC , p3 timeout  13:22:42