async await详解

KavenFan 发布于2019-08-30 15:43 / 2814人阅读

摘要：本身就是的语法糖。类似于后面代码会等内部代码全部完成后再执行打印结果操作符用于等待一个对象。它只能在异步函数中使用。参考附在版本位中是可以直接使用的。持续更新中来点颗吧

async await本身就是promise + generator的语法糖。

本文主要讲述以下内容

async awiat 实质

async await 主要特性

async await 实质

下面使用 promise + generate 实现 async await

    // 转换目标 async1
    // async function async1() {
    //    console.log("async1 start");
    //    await async2();
    //    console.log("async1 end");
    // }

    function async1() {
        // 将 async 转换成 *，将 awiat 转换成 yield
        var awaitInstance = (function* () {
            console.log("async1 start");
            yield async2();
            console.log("async1 end");
        })()

        // 自动执行 await 及后续代码
        // 简单起见，不处理异常情况
        function step() {
            var next = awaitInstance.next();
            // 使用Promise获取 异步/同步 方法的结果，再执行下一步
            Promise.resolve(next.value).then(function (val) {
                if (!next.done) step();
            })
        }
        step();

        // 返回Promise
        return Promise.resolve(undefined);
    }

async await 特性

async 一定会返回 promise

    // 案例1： 不设置return
    async function fn() {}
    fn().then(alert); // alert -> undefined

    // 案例2：return非promise
    async function f() {
        return 1
    }
    f().then(alert); // alert -> 1

    // 案例3： return Promise
    async function fn() {
        return Promise.resolve(2);
    }
    fn().then(alert); // alert -> 2

async 中代码是直接执行的（同步任务）

    console.log(1);

    async function fn() {
        console.log(2);
        await console.log(3)
        console.log(4)
     }
    fn();

    console.log(5);

    // 打印 1 2 3 5 4
    // 为何后面是 3 5 4 ? 往下看

await是直接执行的，而await后面的代码是 microtask。

    async function async1() {
        console.log("async1 start");
        await async2();
        console.log("async1 end");
    }

    // 类似于
    async function async1() {
        console.log("async1 start");
        Promise.resolve(async2()).then(() => {
            console.log("async1 end");
        })
    }

await后面代码会等await内部代码全部完成后再执行

    async function async1() {
        console.log("async1 start");
        await async2();
        console.log("async1 end");
    }

    async function async2() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                console.log("sleep 2s");
                resolve("do");
            }, 2000)
        })
    }

    async1();

    // 打印结果
    // async1 start -> sleep 2s -> async1 end

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。参考 MDN

    附：
    在chrome版本 73.0.3683.86（64 位）中,
    await是可以直接使用的。

    var x = await console.log(1)

End

持续更新中 来Github 点颗⭐吧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116055.html

async await详解

摘要：本身就是的语法糖。类似于后面代码会等内部代码全部完成后再执行打印结果操作符用于等待一个对象。它只能在异步函数中使用。参考附在版本位中是可以直接使用的。持续更新中来点颗吧 async await本身就是promise + generator的语法糖。本文主要讲述以下内容 async awiat 实质 async await 主要特性 async await 实质下面使用 pro...

Shimmer 2019-08-02 16:10 评论0 收藏0
async await详解

摘要：本身就是的语法糖。类似于后面代码会等内部代码全部完成后再执行打印结果操作符用于等待一个对象。它只能在异步函数中使用。参考附在版本位中是可以直接使用的。持续更新中来点颗吧 async await本身就是promise + generator的语法糖。本文主要讲述以下内容 async awiat 实质 async await 主要特性 async await 实质下面使用 pro...

yedf 2019-08-26 13:40 评论0 收藏0
async/await 执行顺序详解

摘要：怎么处理返回值输出结果从结果中可以看到函数返回的是一个对象，如果在函数中一个直接量，会把这个直接量通过封装成对象。如果函数没有返回值结果结果返回。随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。但是很多人对这个方法中内部怎么执行的还不是很了解，本文是我看了一遍技术博客理解 JavaScript 的 async/a...

derek_334892 2019-08-21 16:39 评论0 收藏0
async、await详解

摘要：异步函数是和的组合，基本上，它们是对的更高级别的抽象。引入的原因它们降低了对一些固定语法样板的要求，打破了链式不能切断链式的限制。引入来解决著名的回调地狱问题，但是因为他们自身的复杂性，引入了更复杂的语法。 1、简介需先了解 Promise 【链接地址】 JavaScript 中的异步函数方法。 JavaScript 在很短的时间内从回调演变为 Promises ，从 ES2...

Simon_Zhou 2019-08-23 18:15 评论0 收藏0