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

最新推荐文章于 2025-03-31 19:46:45 发布

HahaMonsters

最新推荐文章于 2025-03-31 19:46:45 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 学习专栏文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/Turn_to_empty/article/details/129929700

vue.js 学习专栏专栏收录该内容

8 篇文章

订阅专栏

本文介绍了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}]