[译]带你理解 Async/await
Async functions
让我们以 async
这个关键字开始。它可以被放置在任何函数前面,像下面这样:
async function f() { return 1; }
在函数前面的「async」这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。即使这个函数在语法上返回了一个非 promise 的值,加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。
例如,以下的代码就返回了一个以 1
为结果的解析后的 promise, 让我们试一下:
async function f() { return 1; } f().then(alert); // 1
… 我们也可以显式返回一个 promise,结果是一样的:
async function f() { return Promise.resolve(1); } f().then(alert); // 1
所以说, async
确保了函数的返回值是一个 promise,也会包装非 promise 的值。很简单是吧?但是还没完。还有一个关键字叫 await
,它只在 async
函数中有效,也非常酷。
Await
语法如下:
// 只在 async 函数中有效 let value = await promise;
关键字 await
让 JavaScript 引擎等待直到 promise 完成并返回结果。
这里的例子就是一个 1 秒后解析的 promise:
async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("done!"), 1000) }); let result = await promise; // 等待直到 promise 解析 (*) alert(result); // "done!" } f();
这个函数在执行的时候,「暂停」在了 (*)
那一行,并且当 promise 完成后,拿到 result
作为结果继续往下执行。所以「done!」是在一秒后显示的。
划重点: await
字面的意思就是让 JavaScript 引擎等待直到 promise 状态完成,然后以完成的结果继续执行。这个行为不会耗费 CPU 资源,因为引擎可以同时处理其他任务:执行其他脚本,处理事件等。
相比 promise.then
来获取 promise 结果,这只是一个更优雅的语法,同时也更易书写。
不能在普通函数中使用 await
如果我们尝试在非 async 函数中使用 await
的话,就会报语法错误:
function f() { let promise = Promise.resolve(1); let result = await promise; // 语法错误 }
如果函数前面没有 async
关键字,我们就会得到一个语法错误。就像前面说的, await
只在 async 函数
中有效。
让我们拿 Promises 链那一章的 showAvatar()
例子改写成 async/await
的形式:
-
用
await
替换掉.then
的调用 -
在函数前面加上
async
关键字
async function showAvatar() { // 读取 JSON let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); // 读取 github 用户信息 let githubResponse = await fetch(`https://api.github.com/users/${user.name}`); let githubUser = await githubResponse.json(); // 显示头像 let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); // 等待 3 秒 await new Promise((resolve, reject) => setTimeout(resolve, 3000)); img.remove(); return githubUser; } showAvatar();
简洁明了,是吧?比之前可强多了。
await
不能在顶层代码运行
刚开始使用 await
的人常常会忘记 await
不能用在顶层代码中。如,下面这样就不行:
// 用在顶层代码中会报语法错误 let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json();
我们可以将其包裹在一个匿名 async 函数中,如:
(async () => { let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); ... })();
await
可以接收「thenables」
像 promise.then
那样, await
被允许接收 thenable 对象(具有 then
方法的对象)。有些对象虽然不是 promise,但是却兼容 promise,如果这些对象支持 .then
,那么就可以对它们使用 await
。
下面是一个 Thenable
类, await
接收了该类的实例:
class Thenable { constructor(num) { this.num = num; } then(resolve, reject) { alert(resolve); // 1 秒后解析为 this.num*2 setTimeout(() => resolve(this.num * 2), 1000); // (*) } }; async function f() { // 等待 1 秒, result 变为 2 let result = await new Thenable(1); alert(result); } f();
如果 await
接收了一个非 promise 的但是提供了 .then
方法的对象,它就会调用这个 then 方法,并将原生函数 resolve
, reject
作为参数传入。然后 await
等到这两个方法中的某个被调用(在例子中发生在(*)的那一行),再处理得到的结果。
Async methods
如果想定义一个 async 的类方法,在方法前面添加 async
就可以了:
class Waiter { async wait() { return await Promise.resolve(1); } } new Waiter() .wait() .then(alert); // 1
异常处理
如果一个 promise 正常解析, await promise
返回的就是其结果。但是如果 promise 被拒绝,就会抛出一个错误,就像在那一行有个 throw
语句那样。
这里的代码:
async function f() { await Promise.reject(new Error("Whoops!")); }
…和下面是一样的:
async function f() { throw new Error("Whoops!"); }
在真实的环境下,promise 被拒绝前通常会等待一段时间。所以 await
会等待,然后抛出一个错误。
我们可以用 try...catch
来捕获上面的错误,就像对一般的 throw
语句那样:
async function f() { try { let response = await fetch('http://no-such-url'); } catch(err) { alert(err); // TypeError: failed to fetch } } f();
如果有错误发生,代码就会跳到 catch
块中。当然也可以用 try 包裹多行 await 代码:
async function f() { try { let response = await fetch('/no-user-here'); let user = await response.json(); } catch(err) { // 捕获到 fetch 和 response.json 中的错误 alert(err); } } f();
如果我们不使用 try...catch
,由 f()
产生的 promise 就会被拒绝。我们可以在函数调用后添加 .catch
来处理错误:
async function f() { let response = await fetch('http://no-such-url'); } // f() 变为一个被拒绝的 promise f().catch(alert); // TypeError: failed to fetch // (*)
如果我们忘了添加 .catch
,我们就会得到一个未处理的 promise 错误(显示在控制台)。我们可以通过在错误处理与 Promise 章节讲的全局事件处理器来捕获这些。
async/await
和 promise.then/catch
当我们使用 async/await
时,几乎就不会用到 .then
了,因为为我们 await
处理了异步等待。并且我们可以用 try...catch
来替代 .catch
。这通常更加方便(当然不是绝对的)。
但是当我们在顶层代码,外面并没有任何 async
函数,我们在语法上就不能使用 await
了,所以这时候就可以用 .then/catch
来处理结果和异常。
就像上面代码的 (*)
那行一样。
async/await
可以和 Promise.all
一起使用
当我们需要同时等待多个 promise 时,我们可以用 Promise.all
来包裹他们,然后使用 await
:
// 等待多个 promise 结果 let results = await Promise.all([ fetch(url1), fetch(url2), ... ]);
如果发生错误,也会正常传递:先从失败的 promise 传到 Promise.all
,然后变成我们能用 try...catch
处理的异常。
Microtask queue
我们在微任务和事件循环章节讲过,promise 回调是异步执行的。每个 .then/catch/finally
回调首先被放入「微任务队列」然后在当前代码执行完成后被执行。
Async/await
是基于 promise 的,所以它内部使用相同的微任务队列,并且相对宏任务来说具有更高的优先级。
例如,看代码:
-
setTimeout(handler, 0)
,应该以零延迟运行handler
函数。 -
let x = await f()
,函数f()
是异步的,但是会立即运行。
那么如果 await
在 setTimeout
下面,哪一个先执行呢?
async function f() { return 1; } (async () => { setTimeout(() => alert('timeout'), 0); await f(); alert('await'); })();
这里很确定: await
总是先完成,因为(作为微任务)它相比 setTimeout
具有更高的优先级。
总结
函数前面的关键字 async
有两个作用:
await
这个 await
关键字又让 JavaScript 引擎等待直到 promise 完成,然后:
throw error
这两个关键字一起用就提供了一个很棒的方式来控制异步代码,并且易于读写。
有了 async/await
我们就几乎不需要使用 promise.then/catch
,但是不要忘了它们是基于 promise 的,所以在有些时候(如在最外层代码)我们就可以用 promise 的形式。再有就是 Promise.all
可以帮助我们同时处理多个异步任务。