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
不能用在顶层代码中。如,下面这样就不行:// syntax error in top-level code 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); // resolve with this.num*2 after 1000ms setTimeout(() => resolve(this.num * 2), 1000); // (*) } }; async function f() { // waits for 1 second, then result becomes 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 正常解析,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
有两个作用:
- 让这个函数返回一个 promise
- 允许在函数内部使用
await
这个 await
关键字又让 JavaScript 引擎等待直到 promise 完成,然后:
- 如果有错误,就会抛出异常,就像那里有一个
throw error
语句一样。 - 否则,就返回结果,并赋值。
这两个关键字一起用就提供了一个很棒的方式来控制异步代码,并且易于读写。
有了 async/await
我们就几乎不需要使用 promise.then/catch
,但是不要忘了它们是基于 promise 的,所以在有些时候(如在最外层代码)我们就可以用 promise 的形式。再有就是 Promise.all
可以帮助我们同时处理多个异步任务。
英文原文地址:https://javascript.info/async-await
© 著作权归作者所有
发表评论