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

新手上路,请多包涵

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

阅读 17.9k
3 个回答

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

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

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

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

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

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

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

"为什么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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
Microsoft
子站问答
访问
宣传栏