将异步(Promise)方法转化为同步执行

本文介绍了async/await函数在处理异步操作时如何保持p1和p2的调用顺序,以及Promise.all在并行执行多个Promise时的行为。当所有Promise成功时,Promise.all返回一个包含所有结果的数组;若有任何一个失败,它将进入catch块。另外,通过封装handlePromise函数,可以确保即使有错误发生,也能获取所有Promise的结果。

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

1.async await函数(p1,p2之间存在前后调用关系)

p1() {
    return new Promise((resolve, reject) => {
        resolve({ status: 200, type: 1 });
    });
},
p2() {
    return new Promise((resolve, reject) => {
        resolve({ status: 200 });
    });
},
async getMethod() {
    console.log(1);
    let res = await p1({
        id: this.id
    });
    if (res.status === 200) {
        console.log(3);
        let res1 = await p2({
            type: res.type
        });
        if (res1.status === 200) {
            console.log(4);
        }
    }
    console.log(2);
},
getMethod();    // log 1 3 4 2

2.promise.all(p1,p2之间不存在调用关系)

const p2 = function () {
    return new Promise(function (resolve, reject) {
        console.log(2);
        resolve(2);
    });
};
const p1 = function () {
    return new Promise(function (resolve, reject) {
        console.log(1);
        resolve(1);
    });
};
const p3 = function () {
    return new Promise(function (resolve, reject) {
        console.log(3);
        reject(3);
    });
};

Promise.all([p1(), p2()]).then(res => {
    console.log(4);
}).catch(error => {
    console.log(5);
});// log顺序为 1 2 4

Promise.all([p1(), p2(), p3()]).then(res => {
    console.log(4);
}).catch(error => {
    console.log(5);
});// log顺序为 1 2 3 5

// 总顺序为 1 2 1 2 3 4 5
  • 如果全部成功,状态变为 resolved,返回值将组成一个数组传给回调
  • 只要有一个失败,状态就变为 rejected,返回值将直接传递给回调。
  • all() 的返回值也是新的 Promise 对象。

若想即使有失败状态,依然返回所有数据,对每个传入 all 的 Promise 对象都加上 .then

// 函数封装
function handlePromise(promises) {
    return promises.map(promise =>
        promise.then(res => ({ status: 'suc', res }), err => ({ status: 'err', err }))
    );
}

Promise.all(handlePromise([p1(), p2(), p3()]))
    .then(res => console.log(res), err => console.log(err));

// [{status: 'suc', res: 1}, {status: 'suc', res: 2}, {status: 'err', err: 3}]

3.promise链式调用

promise链式调用顺序牵扯到宏任务及微任务等,有前辈总结的东西,在这就不复述了。

深度揭秘 Promise 微任务注册和执行过程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值