前言：在讨论 async 和 await 关键字之前，我们需要先掌握 promise 的基础知识。
Promise 概述
Promise 是一种异步编程的解决方案，目的是在异步操作成功和失败的时候，在合适的时间通知程序进一步如何处理。Promise 可以分为 3 个状态：pending（进行中）、resolved（已完成）、rejected（已拒绝）。
let promise = new Promise((resolve, reject) => {
if (/*异步操作成功*/) {
resolve("成功");
} else {
reject("失败");
}
});pending -> resolved | v rejected
async 和 await
async 和 await 是 ECMAScript 2017 新增的异步编程关键字，它们可以显著地改进异步编程的体验和性能。
async
async 关键字用来声明一个异步函数。异步函数会返回一个 Promise 对象，可以在函数内部使用 await 关键字来等待一个 Promise 对象的状态变更。
async function fetchData() {
let result = await fetch("https://api.example.com/data");
let data = await result.json();
return data;
}
fetchData().then((data) => console.log(data)).catch((err) => console.error(err));解析：
- 定义了一个名为 fetchData 的异步函数
- 使用 await 等待 fetch 请求返回结果
- 使用 await 将结果解析为 json 格式的数据
- 返回结果数据
await
await 关键字用来等待一个 Promise 对象的状态变更。当执行到 await 关键字的位置时，函数会暂停执行，直到所等待的 Promise 对象状态变成 resolved 或者 rejected。
使用 await 关键字需要注意以下两点：
- await 关键字只能在异步函数中使用
- await 关键字必须和 Promise 对象一起使用
-- -------------------- ---- -------
----- -------- ----------- -
--- -
--- ------ - ----- --------------------------------------
--- ---- - ----- --------------
------ -----
- ----- ----- -
-------------------
-
-解析：
- fetchData 中使用了 try…catch 语句块来捕获错误
- fetch 请求和 result.json() 方法都使用了 await 等待异步操作的返回结果
- 如果错误发生，catch 语句块可以捕获到错误并输出到控制台
总结
async 和 await 关键字让异步编程更加直观、易懂，同时也避免了回调地狱和复杂的 Promise 链式调用。
回顾 fetchData 函数，它使用 async 关键字声明为异步函数，并且在其中使用了 await 等待异步操作的返回结果。整个函数的返回值是一个 Promise 对象。
async 和 await 的核心就是让我们可以像编写同步代码一样编写异步操作，从而让代码更加简洁易懂。
示例代码
这里提供一个基于 async 和 await 的计时器示例。
-- -------------------- ---- -------
-- -- ------- ----
-------- --------- -
------ --- --------------- -- ------------------- -----
-
----- -------- ------- -
--- ---- - - -- - -- -- ---- -
----------------- ---------
----- ------------
-
--------------------
-- -------------
--- ------ - ----- -----------------------------------------
--- ---- - ----- --------------
------------------------------------
-
--------解析：
- 定义了一个基于 Promise 的 sleep 函数，用来模拟等待一段时间。
- 使用 async 关键字声明了一个异步函数 timer。
- 在异步函数中设置一个倒计时，每隔 1 秒输出倒计时信息。
- 在倒计时结束后，调用抽奖接口，并使用 await 关键字等待抽奖结果返回。
- 输出抽奖结果。
输出：
5 秒后开始抽奖 4 秒后开始抽奖 3 秒后开始抽奖 2 秒后开始抽奖 1 秒后开始抽奖 开始抽奖 恭喜获得奖品：一台 MacBook Pro
经过这个实例，希望开发者们已经能够快速掌握 async 和 await 关键字的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d447bfb5eee0b525bcc813