web前端—前端三剑客之JS-ES6(15)：异步编程处理之async函数

最新推荐文章于 2024-03-19 11:12:04 发布

觅远

最新推荐文章于 2024-03-19 11:12:04 发布

阅读量247

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/JBY2020/article/details/119522234

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

菜鸟教程：https://www.runoob.com/w3cnote/es6-async.html

async 函数是 Generator 函数的语法糖，是将 Generator 函数的星号（*）替换成async，将yield替换成await。

async函数的特点：

内置执行器：Generator 函数的执行必须靠执行器，需要调用next方法才能真正执行，得到最后结果。async函数自带执行器，async函数会自动执行，输出最后结果。
语义简明：async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
适用性更广：async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
继承了 Promise对象的方法：async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

async函数的用法

async函数会先输出一个promise对象, 然后会监听await后面promise对象的返回状态, 当这状态为resolved的时候再往下执行其他的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function print(value, time) {
            setTimeout(() => {
                console.log(value);
            }, time)
        }

        async function p(value1, time1, value2, time2) {
            await print(value1, time1);
            await d;  // 用一个没有定义的对象生成一个错误，交给后面的catch函数处理
            await print(value2, time2);
            return '心情美美哒';
        }

        p('下课了', 2000, '放学了', 3000)
            .then((data) => {   // 返回async函数的return的数据
                console.log(data);
            })
            .catch((err) => {   // 用来处理错误的函数
                let e = new Error('出现错误：');
                console.log(e, err);
            });
    </script>
</body>

</html>