typescript 中 await async 能解决哪些常见问题以及其先进性

Question

问题如上。作为刚刚接触typsscript的新人非常迫切想要得知。

Answer 1

await/async 称为异步函数，是未来ES2017标准可能引入的特性之一，TypeScript作为实现ES标准的先锋语言，很早就支持该特性了，然后在2.1版本使得异步函数可以编译为ES5/ES3版本，大大推动了异步函数的可用性。

async函数实际上是ES6中生成器的改进版。

我们JS开发者在处理异步这件事儿一直在否定之否定中前进，先是回调函数，再到Promise标准，然后生成器Generator的出现，及即将成为标准的async函数，这一路走来只为了一件事儿，那就是处理异步。

目前看来async函数是终极方案了，它编写起来更像我们在写同步代码，由上向下一步一步执行，而不像回调那样跳来跳去，也不会掉入回调黑洞。

async函数的出现解决最大最主要问题就是异步的问题，有了async函数我们的代码非常条例清理且易于理解。

关于async函数的详情，可以看看阮一峰的文档。
你也可以看看我翻译的博客
还有google对async函数的讲解

Ps:关于TypeScript更多详情访问TypeScript中文网

Answer 2

"为什么Promise比callback好"，就不赘述了。这个回答主要讨论为什么async/await比Promise.then好:

我觉得async最好的一点是: 和一般js有相同的scope和几乎相同的语法，真正做到了代码上的顺序执行，行为上的异步执行。

在没有async的时候，Promise的每一个匿名函数有自己的作用域。往往要做一些额外的事才能在这些作用域间共享值。

function asyncOperation(n: number): Promise<number>;

function foo1(arg1: Promise<number>) {
    return arg1
        .then(/* 匿名函数1 */ n1 => asyncOperation(n1))
        .then(/* 匿名函数2 */ n2 => 100 / n2);
}

如果想要在匿名函数2中再使用n1的值怎么办呢？一般的作法是在上层scope，即foo1中新开一个变量，在匿名函数1中把n1放进去，在匿名函数2中去拿:

function foo1(arg1: Promise<number>) {
    let n1_lifted;
    return arg1
        .then(/* 匿名函数1 */ n1 => { n1_lifted = n1; return asyncOperation(n1) })
        .then(/* 匿名函数2 */ n2 => 100 / n2);
}

你感到痛苦了吗？

现在再看一下用async写的版本:

async function foo2(arg1: Promise<number>) {
    const n1 = await arg1;
    const n2 = await asyncOperation(n1);
    // foo2内没有嵌套的scope, 你仍然可以在这里使用n1
    
    return n2;
}

Answer 3

给你两篇我的博客作为参考：

• 理解 JavaScript 的 async/await

• 从地狱到天堂，Node 回调向 async/await 转变