当我第一次看到 async/await 的描述时有点困惑,直到我了解了 async/await 的出处,才领悟到它的价值。本文我们来讨论 javascript 世界中最先进的异步编程思想之一。
什么是异步函数
javascript 中的异步函数是有着一些“超能力”的常规函数。要定义异步函数,需要在其定义前加上 关键字。
运行上面的程序,得到下面的输出。
在获得超能力之前,应该先明白异步函数不是什么。默认情况下异步函数不会异步运行你的代码。看下面的代码。
如果运行上面的程序,将会得到以下输出。
我们可以看到程序是按顺序输出的,即 中的工作不是异步完成的。
你可能还注意到了代码中带编号的注释( )本文中的这类注释可以帮你理解代码的执行顺序。
永远返回 Promise
现在我们知道异步函数不是什么,但是它们是什么呢?异步函数的第一个超级功能:总是返回一个 promise。看下面的代码
我们希望这个小程序输出字符串Hello World。但是,如果运行它:
可以看到它返回一个实例化的Promise对象,并且该对象已经确定为我们返回的值(字符串Hello World)。异步函数获取了我们返回的字符串,并将其转换为一个 Promise。
如果想在程序中实现这个 Promise 的值,就需要使用 方法.
如果你从异步函数返回显式的 Promise,它将会变得更加复杂。比我们想要的复杂得多。简短的版本是 async 函数返回新的 Promise,这个 Promise 最终将解析为你返回的 Promise 的已解决值。如果运行这段代码
你将得到一个 Promise,Promise 的值将变为Hello Promise。
有意思的是,如果你用 方法返回任何对象的话,
异步函数会将其视为 promise。
这些对象有时称为“then-able”。因此,你可以将任意第三方 Promise 库与异步函数一起使用(只要该库使用 方法即可)。
Await
异步函数总是返回 promise。要知道为什么总是返回 Promise,就需要了解异步函数的第二种超级功能:使用 语句实现 promise 的能力。
在异步函数中编写代码时,可以使用 语句。该语句在异步函数外部不可用。
语句期望在其右侧有一个 promise 对象。当你使用 语句时,javascript 会暂停函数的执行,等待 promise 返回一个值,然后继续执行。
看下面的程序:
这是另一个用来演示证明 promise 如何运作的小程序。该程序创建一个Promise对象,该对象将异步返回Hello Promise文本。然后,在名为 的函数中,我们要求该 promise 作为其值,然后记录这个值。执行程序得到以下输出。
也就是说,在 promise 中的异步工作运行之前, 函数将完成执行。Promise 本身迫使我们使用回调来获取Promise 的值。我们无法在 的作用域内获得 Promise 的值。
下面是相同的程序,但是用了 函数和 语句。
运行程序得到以下输出:
也就是说 函数将会输出第一行
然后当我们使用 时,该函数将会停止并等待 promise 执行,然后输出其结果
最后输出最后一条日志。
换句话说,即使我们用的是 Promise,此函数中代码也可以使我们以同步的方式执行。
这就是 async/await 的力量。原始延续传递风格异步API创建了 “callback-heck”,每个异步上下文具有多层嵌套回调。Promise 对此进行了一些清理,使我们可以将事情限制在单个级别的回调中。async/await 组合是它的下一个改进——使用 ,我们可以无需使用回调就能够得到异步工作的结果。
异步的对立面?
async/await 组合是强大的,但是可能有些东西会困扰你。
然后当我们使用 时,该函数将会停止”并等待 promise 执行,然后输出其结果
如果等待执行完成,那么这个异步代码会怎样?这听起来像异步代码的“对立面”。
根据前面已经告诉你的一切,你的顾虑是正确的。但是我们仍然没有讨论异函数能如何与你程序的其余部分进行交互。
当你的异步函数正在等待 promise 解决时,javascript将跳回到调用上下文并继续执行主程序。如果我们用以下内容替换 函数及其调用,会得到什么结果呢?
如果运行 上面这段程序,则会得到以下输出。
也就是说序将会按照以下顺序执行
虽然代码在 中按顺序执行,但是调用 则意味着整个程序不会按顺序执行。相反,执行将离开 函数,在 作用域内完成执行,最后返回完成 的执行。
返回两次?
该执行模型存在一些歧义。例如下面这段程序的异步函数
如果 使函数提前返回,那么 中会是什么?不会是 ,因为该代码尚未运行。让我们运行程序并找出答案。
这就是为什么异步函数总是返回 promise 的原因。当我们使用 时,程序无法知道该函数的实际返回值。而是函数调用返回一个 Promise。那么是否需要异步函数返回的值?你可以使用 promise 的 方法,或者如果你在另一个异步函数中,则可以用 返回的 promise。
总结
我花了一段时间才了解 async/await 是如何对异步事务状态进行整体改进的。尽管 async/await 确实简化了使用 promise 的各个函数的执行过程,但你仍然必须处理越来越多的非线性代码。
我意识到,async/await 在系统程序员和客户端程序员之间提供了清晰明了的界限。客户端程序员可以像执行同步任务一样使用 promise,但是在幕后并没有真正阻止 promise。系统程序员承担管理整个程序的异步复杂性的负担。
如果你考虑一下这几天有多少系统在工作,这是有道理的。在像 express 之类的路由框架中,普通的客户端程序员实际上并没有真正考虑 express 内部的工作,他们只是编写路由函数。在支持 async/await 的路由框架中,客户端程序员可以编写其路由并 ,直到他们满意为止。express 核心团队将需要处理这些路由函数所返回的 promise。
async/await 模式使服务端开发人员有机会从客户端代码中“消除”异步编程的复杂性。虽然还处于初期,但随着更多框架开始考虑使用 来构建系统,对于尚未具备编写异步代码的深层背景的程序员,现代 javascript 的可访问性将有所提高。
领取专属 10元无门槛券
私享最新 技术干货