async&await的一些理解

今天有空看了一下node.js v7.6.0的新特性

分析

①async函数返回什么

async function func() {
    let res = await Promise.resolve(1);
    console.log('in', res);
    return res;
}
let res = func();
console.log('out', res);

运行之前，我以为先打印 in，再输出 out，然而我想的并没有什么卵用。实际上，async函数返回一个一个promise,而且还是异步的。也就是说，先输出 out， 然后才是 in。然后我就想，如果我想要的同步，怎么办？能不能这样

let res = await func();

事实证明，报错，async和await是孪生兄弟不能分开的。只能这样

(async () => {
    let res = await func();
    console.log('out', res);
})();

感觉好麻烦的样子，最外层还要套一个async。这样做的后果是，启动的时候直接从一个函数开始，然后不断地调用async函数。跟c语言的main函数一样的意思。

②async函数什么时候返回

还是直接上代码

async function func() {
    console.log('in-before');
    let res = await Promise.resolve(1);
    console.log('in', res);
    return res;
}

let res = func();
console.log('out', res);

第一感觉： out->in-before->in???
好像会有人这么认为，结果呢？当然也是不对的。正确来说，in-before->out->in。
为什么会这样呢？不是说async是异步的吗？怎么会先输出 in-before 的？
对于async函数来说，当遇到第一个await关键字的时候就已经返回了，跟一般函数里面的 return 一样。

那么问题来了，如果我有2个await呢？

async function func() {
    console.log('in-before');
    let res = await Promise.resolve(1);
    console.log('in1', res);
    let res2 = await Promise.resolve(2);
    console.log('in2', res2);
    return res2;
}

let res = func().then(console.log);
console.log('out', res);

如果说遇到第一个await已经返回一个promise的话，那么，最终 func().then 打印的是什么呢？答案是2，在输出 in2后打印 2 。

所以，总结一下上面的讨论。调用一个async函数 func 的时候，遇到第一个await就直接返回一个promise了。只是，这个promise想要继续往下走的话，必须要等这个 func 函数执行完之后才能使用。而且这个promise.then得到的是 func的最终返回值。结合上面最后一个代码，应该不难理解。

只是，我觉得有点不可思议，说好的遇到第一个 await 就返回了，为啥最终获取的确实最后return返回的值呢？不科学啊！！！

别急，客官，听我细说。看看下面这个代码。

function func() {
    console.log('in', 1);
    return Promise.resolve(2).then(() => {
        return 3;
    });
}

func().then(console.log);
console.log('out');

看到这里，绝大多数人应该能知道正确答案：in->out->3

再次分析

虽然在func函数遇到了关键字return立刻返回一个promise,但是如果要使用这个promise,必须等到func函数里面的promise先执行完。也就是说， func().then得到的是最后的3。

回头一看，发现这两个用法其实是一样的。你有await，我有return，大家都是直接返回了。在我看来，await/async只是一个语法糖而已。在遇到首个await promise的时候，实际就是return了，至于下面那些逻辑，是promise链里面的东西。

await Promise.resolve(1);
await Promise.resolve(2);
console.log(2)
await Promise.resolve(3);
return 4;

上面代码和下面代码效果一样

return Promise.resolve(1)
        .then(() => 2)
        .then(() => {
            console.log(2)
            return Promise.resolve(3);
        })
        .then(() => 4)

好看了，简洁了。

总结

• 这个新特性 async/await 和我想象中不太一样哇。
• 返回的是promise(异步)，如果不想显示使用promise，只能在调用者的外层加一个async。
• 我感觉用起来和 co 用起来很像。
• 和generator的区别也不是十分大。
• 功能没啥实际变化，但是语法看起来简洁了。
• 语法糖。