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

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 微任务注册和执行过程

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,我们可以使用一些方法异步代码换为同步执行的代码。一种常见的方法是使用async/await关键字,它可以让异步代码看起来像同步代码一样运行。通过使用async关键字定义一个函数,我们可以在函数内部使用await关键字来等待异步操作的结果。这样可以确保异步操作在执行完成之前不会继续执行下面的代码。 下面是一个示例,演示了如何将一个异步的延迟函数delayAsync换为同步执行方法delaySync: ``` function delayAsync(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Done'); }, ms); }); } async function delaySync(ms) { try { const result = await delayAsync(ms); console.log(result); // 继续处理结果 } catch (error) { console.error(error); // 处理错误 } } delaySync(2000); ``` 在上面的示例中,delayAsync函数返回一个Promise对象,通过使用setTimeout函数模拟一个延迟操作。在delaySync函数中,我们使用await关键字等待delayAsync函数的结果,并在控制台打印出结果。通过这种方式,我们可以在代码中以同步的方式处理异步操作的结果。 需要注意的是,将异步方法换为同步执行方法应该谨慎使用。异步方法的非阻塞特性通常是其优势,所以只有在确实需要同步执行的情况下才应该进行换。在不必要的情况下,应避免将异步方法换为同步执行,以充分利用异步操作的性能优势。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [JavaScript编程技巧:将异步方法换为同步执行的实用方法](https://blog.csdn.net/qq_39997939/article/details/131063612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值