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

本文重要报告以下内容

1. async awiat 本质
2. 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 特征

1. 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

1. 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 ? 往下看

1. 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');
        })
    }

1. 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

1. await 操作符用于守候一个Promise 对象。它只能在异步函数 async function 中运用。参考 MDN

    附：
    在chrome版本 73.0.3683.86（64 位）中,
    await是能够直接运用的。

    var x = await console.log(1)

End

延续更新中
来Github 点颗⭐吧