Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用
让我们以 async
这个关键字开始。它可以被放置在一个函数前面,如下所示:
async function f() {
return 1;
}
在函数前面的 “async” 这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。
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 (*)
alert(result);
}
f();
这个函数在执行的时候,“暂停”在了 (*)
那一行,并在 promise settle 时,拿到 result
作为结果继续往下执行。
让我强调一下:await
实际上会暂停函数的执行,直到 promise 状态变为 settled,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。
相比于 promise.then
,它只是获取 promise 的结果的一个更优雅的语法,同时也更易于读写。
不能在普通函数中使用 await
总结:
函数前面的关键字 async
有两个作用:
- 让这个函数总是返回一个 promise。
- 允许在该函数内使用
await
。
Promise 前的关键字 await
使 JavaScript 引擎等待该 promise settle,然后:
- 如果有 error,就会抛出异常 — 就像那里调用了
throw error
一样。 - 否则,就返回结果。
这两个关键字一起提供了一个很好的用来编写异步代码的框架,这种代码易于阅读也易于编写。
有了 async/await
之后,我们就几乎不需要使用 promise.then/catch
,但是不要忘了它们是基于 promise 的,因为有些时候(例如在最外层作用域)我们不得不使用这些方法。并且,当我们需要同时等待需要任务时,Promise.all
是很好用的。
实例应用: