async和await实现多个promise顺序执行(同步执行)

使用场景:在一个请求结束后再执行第二个请求,第二个请求结束再请求第三个请求....

        list1() {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log('1', '我是第一个任务,必须第一个执行');
                    resolve(1);
                }, 3000);
            });
        },

        list2() {
            new Promise(resolve => {
                setTimeout(() => {
                    console.log('2', '我是第二个任务');
                    resolve(2);
                }, 2000);
            });
        },

两个函数list1要延迟三秒执行,list2延迟2秒执行,正常顺序执行的话在js里两个异步任务肯定是一起执行的,打印出来就是哪个用时短先打印哪个,希望list1三秒结束以后再执行list2

利用async await

    mounted() {
        this.init();
    },
    methods: {
        async init() {
            await this.list1();
            this.list2();
        },

        list1() {
            // 这个里的return很关键,一定要return出去
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log('1', '我是第一个任务,必须第一个执行');
                    resolve(1);
                }, 3000);
            });
        },

        list2() {
            new Promise(resolve => {
                setTimeout(() => {
                    console.log('2', '我是第二个任务');
                    resolve(2);
                }, 2000);
            });
        },
}

这样打印出来就是1,2

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
async/await 是基于 Promise 的异步编程语法糖,它们可以使异步代码更加清晰、易读,并提供了一些优势: 1. 可读性更强:使用 async/await 可以将异步代码写成类似于同步代码的形式,通过使用 async 关键字标记异步函数,使用 await 关键字等待 Promise 的解析结果。这样可以使代码更加易读、易理解,避免了回调地狱的嵌套问题。 2. 错误处理更方便:使用 async/await 可以使用 try/catch 语法来处理 Promise 的异常情况。这样可以使错误处理更加直观和简洁,而不需要多层嵌套的回调函数来处理错误。 3. 更好的控制流程:使用 async/await 可以使异步代码的流程控制更加直观和线性化。通过使用 await 关键字,可以等待一个异步操作完成后再继续执行下一步操作,这样可以更好地控制异步操作的执行顺序。 4. 更好的调试和错误追踪:使用 async/await 可以在代码中添加断点进行调试,而 Promise 链式调用可能会导致断点不准确的问题。此外,使用 async/await 可以提供更好的错误追踪能力,因为错误会被封装在 try/catch 块中,可以更容易地定位出错的位置。 尽管 async/await 提供了以上优势,但它们本质上仍然是基于 Promise 的。在一些特定场景下,Promise 可能仍然更适合使用,比如需要更细粒度的控制或需要处理多个并发的异步操作。因此,选择使用 async/await 还是 Promise 取决于具体的需求和场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值