promise进阶之async和await用法

最新推荐文章于 2024-04-13 10:36:09 发布

Jimxx

最新推荐文章于 2024-04-13 10:36:09 发布

阅读量164

点赞数

分类专栏： web基础文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Jimxx/article/details/129125176

版权

web基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

async/await是ES7引入的语法糖，用于更优雅地处理异步操作。它们使得异步函数看起来像是同步代码，await关键字允许在等待Promise解决时不会阻塞外部代码，仅在async函数内部产生效果。相比于原生Promise的.then链式调用，async/await提供了一种更简洁的写法，尤其在有依赖顺序的异步步骤中。然而，对于并行无依赖的请求，使用Promise.all会更为高效。

摘要由CSDN通过智能技术生成

ES7推出async和await语法糖，可以更加简便得运用promise，说明什么，它真的很实用！！

async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行。

await是一个运算符，意为等待，用于组成表达式，await表达式的运算结果取决于返回的东西。

若等的是一个数据体，那await表达式的运算结果就是这个数据体

而如果等的是一个Promise对象，它会阻塞后面代码的执行，等着Promise对象resloved得到reslove的值，作为await表达式的运算结果，所以放于async内部，只会在内部阻塞，不会影响外部代码正常运行！！

直接用上一篇文章的例子来实现，更有对比一些


        async promiseTest(){
            this.prms1()
            this.prms2()
            this.prms3()
            await this.prms1()
            await this.prms2()
            await this.prms3()
        },

        prms1(){
            var p = new Promise(function(resolve, reject){
                //做一些异步操作
                setTimeout(function () {
                    console.log('执行完成11');
                    resolve('脱裤子');//then成功的返回
                }, 3000);
            });
            return p
        },
        prms2(){
            var p = new Promise(function(resolve, reject){
                //做一些异步操作
                setTimeout(function () {
                    console.log('执行完成22');
                    resolve('蹲坑');//then成功的返回
                }, 1000);
            });
            return p
        },
        prms3(){
            var p = new Promise(function(resolve, reject){
                //做一些异步操作
                setTimeout(function () {
                    console.log('执行完成33');
                    resolve('穿裤子');//then成功的返回
                }, 2000);
            });
            return p
        },
        this.promiseTest()
        //异步效果
        //执行完成22
        //蹲坑
        //执行完成11
        //脱裤子
        //执行完成33
        //穿裤子
        //async + await 实现同步效果
        //执行完成11
        //脱裤子
        //执行完成22
        //蹲坑
        //执行完成33
        //穿裤子

与es6的原生Promise对比：

1、不再需要多层.then方法。假设一个业务分很多步骤完成，并且每个步骤都是异步，依赖上一个步骤的结果。那么用async/await就可以像写同步代码一样依次写下。

2、同样如果同时请求多个无关联的请求，用async/await就会费事许多（因为await阻塞，第二个请求会在第一个请求有结果后发出），这时用Promise.all更合适