Async、await
Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。
Async function
让我们以 async
这个关键字开始。它可以被放置在一个函数前面,如下所示:
async function f() {
return 1;
}
在函数前面的 “async” 这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。
例如,下面这个函数返回一个结果为 1
的 resolved promise,让我们测试一下:
async function f() {
return 1;
}
f().then(console.log); // 1
……我们也可以显式地返回一个 promise,结果是一样的:
async function f() {
return Promise.resolve(1);
}
f().then(console.log); // 1
所以说,async
确保了函数返回一个 promise,也会将非 promise 的值包装进去。很简单,对吧?但不仅仅这些。还有另外一个叫 await
的关键词,它只在 async
函数内工作,也非常酷。
await
语法如下:
// 只在 async 函数内工作
let value = await promise;
关键字 await
让 JavaScript 引擎等待直到 promise 完成(settle)并返回结果。
这里的例子就是一个 1 秒后 resolve 的 promise:
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});
let result = await promise; // 等待,直到 promise resolve (*)
console.log(result); // "done!"
}
f();
这个函数在执行的时候,“暂停”在了 (*)
那一行,并在 promise settle 时,拿到 result
作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。
让我们强调一下:await
实际上会暂停函数的执行,直到 promise 状态变为 settled,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。
相比于 promise.then
,它只是获取 promise 的结果的一个更优雅的语法。并且也更易于读写。
不能在普通函数中使用
await
如果我们尝试在非 async 函数中使用
await
,则会报语法错误:jsfunction f() { let promise = Promise.resolve(1); let result = await promise; // Syntax error }
如果我们忘记在函数前面写
async
关键字,我们可能会得到一个这个错误。就像前面说的,await
只在async
函数中有效。
让我们拿 Promise 链 那一章的 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();
简洁明了,是吧?比之前可强多了。
现代浏览器在 modules 里允许顶层的
await
在现代浏览器中,当我们处于一个 module 中时,那么在顶层使用
await
也是被允许的。我们将在 模块 (Module) 简介 中详细学习 modules。例如:
js// 我们假设此代码在 module 中的顶层运行 let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); console.log(user);
如果我们没有使用 modules,或者必须兼容 旧版本浏览器 ,那么这儿还有一个通用的方法:包装到匿名的异步函数中。
像这样:
js(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
接受了该类的实例:jsclass Thenable { constructor(num) { this.num = num; } then(resolve, reject) { console.log(resolve); // 1000ms 后使用 this.num*2 进行 resolve setTimeout(() => resolve(this.num * 2), 1000); // (*) } } async function f() { // 等待 1 秒,之后 result 变为 2 let result = await new Thenable(1); console.log(result); } f();
如果
await
接收了一个非 promise 的但是提供了.then
方法的对象,它就会调用这个.then
方法,并将内建的函数resolve
和reject
作为参数传入(就像它对待一个常规的Promise
executor 时一样)。然后await
等待直到这两个函数中的某个被调用(在上面这个例子中发生在(*)
行),然后使用得到的结果继续执行后续任务。
Class 中的 async 方法
要声明一个 class 中的 async 方法,只需在对应方法前面加上
async
即可:jsclass Waiter { async wait() { return await Promise.resolve(1); } } new Waiter() .wait() .then(console.log); // 1
这里的含义是一样的:它确保了方法的返回值是一个 promise 并且可以在方法中使用
await
。
Error处理
如果一个 promise 正常 resolve,await promise
返回的就是其结果。但是如果 promise 被 reject,它将 throw 这个 error,就像在这一行有一个 throw
语句那样。
这个代码:
async function f() {
await Promise.reject(new Error("Whoops!"));
}
……和下面是一样的:
async function f() {
throw new Error("Whoops!");
}
在真实开发中,promise 可能需要一点时间后才 reject。在这种情况下,在 await
抛出(throw)一个 error 之前会有一个延时。
我们可以用 try..catch
来捕获上面提到的那个 error,与常规的 throw
使用的是一样的方式:
async function f() {
try {
let response = await fetch('http://no-such-url');
} catch(err) {
console.log(err); // TypeError: failed to fetch
}
}
f();
如果有 error 发生,执行控制权马上就会被移交至 catch
块。我们也可以用 try
包装多行 await
代码:
async function f() {
try {
let response = await fetch('/no-user-here');
let user = await response.json();
} catch(err) {
// 捕获到 fetch 和 response.json 中的错误
console.log(err);
}
}
f();
如果我们没有 try..catch
,那么由异步函数 f()
的调用生成的 promise 将变为 rejected。我们可以在函数调用后面添加 .catch
来处理这个 error:
async function f() {
let response = await fetch('http://no-such-url');
}
// f() 变成了一个 rejected 的 promise
f().catch(console.log); // TypeError: failed to fetch // (*)
如果我们忘了在这添加 .catch
,那么我们就会得到一个未处理的 promise error(可以在控制台中查看)。我们可以使用在 使用 promise 进行错误处理 一章中所讲的全局事件处理程序 unhandledrejection
来捕获这类 error。
async/await
和promise.then/catch
当我们使用
async/await
时,几乎就不会用到.then
了,因为await
为我们处理了等待。并且我们使用常规的try..catch
而不是.catch
。这通常(但不总是)更加方便。但是当我们在代码的顶层时,也就是在所有
async
函数之外,我们在语法上就不能使用await
了,所以这时候通常的做法是添加.then/catch
来处理最终的结果(result)或掉出来的(falling-through)error,例如像上面那个例子中的(*)
行那样。
async/await
可以和Promise.all
一起使用当我们需要同时等待多个 promise 时,我们可以用
Promise.all
把它们包装起来,然后使用await
:js// 等待结果数组 let results = await Promise.all([ fetch(url1), fetch(url2), ... ]);
如果出现 error,也会正常传递,从失败了的 promise 传到
Promise.all
,然后变成我们能通过使用try..catch
在调用周围捕获到的异常(exception)。
总结
async await的基本使用
函数前面加上 async 后,这个函数里就可以使用await了
async的函数,总是会返回一个promise,其他的值自动被包装在一个resolve的promise里
jsasync function fn() { console.log('aaa'); // 如果不给返回值,默认返回一个 Promise.resolve(undefined) // 有返回值 就会被包装一下 Promise.resolve(value) // 也可以显示的返回一个Promise return Promise.resolve(value) } fn().then(res => { console.log(res); // undefined })
await 后跟的promise会卡住,代码执行到这的时候,会一直等待promise返回结果(不管是fulfilled或者rejected,反正得有一个结果,当 await 检测到自己后面的promise没有状态改变后,会立即终止程序,不会继续等待,但是await后面的代码不会被执行)
jsasync function fn() { let promise = new Promise((resolve, reject) => { // 试一下不返回结果,await 后面的代码会一直不执行 /* setTimeout(() => { resolve(1) }, 2000) */ }) console.log('aaaa'); let a = await promise // 如果上面await后面的promise一直不改变状态,这后面的代码就不会被执行 // await 检测到没有状态改变后,会立即终止程序,不会继续等待 console.log(a); console.log('bbb'); } fn()
不能在普通函数中使用 await,会报错
现代浏览器中的 modules 里 允许顶层的await,但是如果没有使用modules,可以使用闭包来模拟
js(async ()=>{ // ... })()
await 接收 thenables,就是后面的对象里可以有一个类似promise的then 方法也是可以的
jsasync function fn() { let obj = { then: function (resolve, reject) { setTimeout(() => { resolve(1) }, 2000) } } let a = await obj console.log(a); // 1s后也会把1打印出来 } fn()
class 中的 async方法,直接在方法前面加 async即可
async await 的错误处理
如果正常的被reject,就会被throw一个error
js// 就好像这样 async function f() { await Promise.reject(new Error("Whoops!")); } // 上面的和下面的是等价的 async function f() { throw new Error("Whoops!"); }
错误的两种接收方式
直接在函数调用的最外部接收
jsasync function fn() { let promise = new Promise((resolve, reject) => { reject(new Error('出错了')) }) await promise } fn().catch(err => { console.log(err); })
使用
try...catch
把使用await的地方包裹一下,也是可以接收到的jsasync function fn() { let promise = new Promise((resolve, reject) => { reject(new Error('出错了')) }) try { await promise } catch (error) { console.log(error); } } fn()
async await的并行和串行
串行,第一个await执行完,再继续执行下一个
js// 延时函数 function delay(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve() }, time) }) } // 模拟一个延迟接口 async function getData(data) { await delay(2000) return data } async function fn() { // 串行的promise // 一个一个执行(如果不知道这个知识点的话,我们一般都会串行写) // 其实很多时候并行执行 await 速度更快 // 这个例子先演示串行 let a = await getData(111) let b = await getData(222) console.log(a); console.log(b); // 这样子使用 打印出来 a b 的结果 大约是4s,每个请求都会延迟2s } fn()
并行,多个await一块执行
上面的实例,换成并发就会好很多
方法一,先拿到promise,然后再await
jsfunction delay(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve() }, time) }) } // 模拟一个延迟接口 async function getData(data) { await delay(2000) return data } async function fn() { // 串行的promise // 一个一个执行(如果不知道这个知识点的话,我们一般都会串行写) // 其实很多时候并行执行 await 速度更快 // 看一下并行,方法一,先接收promise 在一起await let promise1 = getData(111) let promise2 = getData(222) let a = await promise1 let b = await promise2 console.log(a); console.log(b); // 这样子使用 打印出来 a b 的结果 大约是2s,并发执行了 } fn()
方法二,使用Promise.all,(推荐这么写)
jsfunction delay(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve() }, time) }) } // 模拟一个延迟接口 async function getData(data) { await delay(2000) return data } async function fn() { // 串行的promise // 一个一个执行(如果不知道这个知识点的话,我们一般都会串行写) // 其实很多时候并行执行 await 速度更快 // 看一下并行,方法二,使用promise.all,推荐!!!! let [a, b] = await Promise.all([ getData(111), getData(222) ]) console.log(a); console.log(b); // 这样子使用 打印出来 a b 的结果 大约是2s,并发执行了 } fn()