史上最强解答 ES6异步神器async/await

不知名的前端专家

已于 2022-02-26 09:59:25 修改

阅读量502

点赞数 2

文章标签： javascript 前端 es6

于 2022-02-23 18:38:45 首次发布

本文链接：https://blog.csdn.net/start1018/article/details/123095574

版权

本文详细介绍了async/await与Promise的关系，指出async/await是建立在Promise之上，提供更简洁的异步编程方式。async函数返回Promise，await用于等待Promise解析，使得代码看起来更同步。通过示例展示了如何使用async/await处理异步操作，避免回调地狱，提高代码可读性。

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

async/await和Promise的关系

async/await只是为了让我们书写代码时更加流畅，增强了代码的可读性。简单来说：async-await 是建立在 promise机制之上的，并不能取代其地位。

async/await特点

async/await更加语义化,async 是“异步”的简写,async function 用于申明一个 function 是异步的; await,可以认为是async wait的简写,用于等待一个异步方法执行完成；
async/await是一个用同步思维解决异步问题的方案(等结果出来之后,代码才会继续往下执行)；
可以通过多层 async function 的同步写法代替传统的callback嵌套;

基本语法

<script>
        async function basicDemo() {
            let result = await Math.random();
            console.log(result);//0.6828463497057475
        }
        basicDemo();
    </script>
</body>

上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await.

自动将常规函数转换成Promise,返回值也是一个Promise对象;
只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数;
异步函数内部可以使用await;

async

用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。

<script>
        async function demo1() {
            return "你好async";
        }
        demo1().then(res => {
            console.log(res);// 你好async
        });
    </script>

若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve()

await

await 必须出现在 async 函数内部，不能单独使用。

<script>
        function demo2() {
            await Math.random();
        }
        demo2() //Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
    </script>

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

实例

<script>
        function asy(msg, time) {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve(msg), time)
            })
        }
        //定义async函数
        async function doit() {
            var s1 = await asy("你好呀", 2000);
            //await会等待say函数执行完才会向下执行
            console.log(s1);
            var s2 = await asy("我很中意你啊", 4000)
            console.log(s2);
            return s1 + s2
        }
        doit()
            .then((res) => console.log(res))
    </script>