在前端开发中，我们经常需要进行异步操作，例如进行 Ajax 请求或者操作 DOM 元素等。为了方便异步操作的编写和管理，JavaScript 提供了两个非常强大的机制：Promise 和 async/await。
Promise
Promise 是一种用于管理异步操作的对象。可以将其看做一个容器，异步操作产生的结果会被放置在这个容器内。Promise 对象分为三种状态：
- Pending（待定）：Promise 对象创建后处于的初始状态，尚未确定异步操作的完成结果。
- Fulfilled（执行完成）：异步操作已成功完成。
- Rejected（执行失败）：异步操作执行过程中发生错误。
创建 Promise 对象时，需要传入一个函数（通常称为回调函数），该函数接受 resolve 和 reject 两个函数作为参数：
let promise = new Promise((resolve, reject) => {
// 执行异步操作
// 若操作成功，则调用 resolve 回调函数，并将结果传递给它
// 若操作失败，则调用 reject 回调函数，并将错误信息传递给它
});可以通过 then 方法来获取 Promise 对象的执行结果：
-- -------------------- ---- -------
--- ------- - --- ----------------- ------- -- -
------------- -- -
-- ------
-------------------
-- --
-- ----------------
-- ------
---
--------------------- -- -
--------------------
---------------- -- -
-------------------
---then 方法返回一个新的 Promise 对象，可以使用链式调用来执行多个异步操作：
-- -------------------- ---- -------
--- ------- - --- ----------------- ------- -- -
------------- -- -
-- ------
-------------------
-- ------
---
--------------------- -- -
--------------------
------ --- ----------------- ------- -- -
------------- -- -
-- ------
--------------------
-- ------
---
---------------- -- -
--------------------
---------------- -- -
-------------------
---async/await
async/await 是 ES2017（ES8）引进的一个新特性，旨在提供一种更加简单、直观的异步操作机制。
async 关键字用于定义一个异步函数，函数内部可以使用 await 关键字等待异步操作的完成：
async function demo() {
let result = await promise;
console.log(result);
}async 函数始终返回一个 Promise 对象，可以通过 then 方法获取其执行结果：
-- -------------------- ---- ------- ----- -------- ------ - --- ------ - ----- -------- -------------------- ------ ---------- - -------------------- -- - -------------------- ---------------- -- - ------------------- ---
如果 await 后面的操作返回一个 rejected 状态的 Promise，则会直接抛出异常，可以通过 try-catch 语句来捕获：
async function demo() {
try {
let result = await promise;
console.log(result);
} catch (error) {
console.log(error);
}
}可以使用 async/await 优雅地处理多个异步操作的依赖关系，例如：
-- -------------------- ---- -------
----- -------- ----------- -
--- -- - ----- --------
--- ---- - ----- ----------------
------------------
-
----- -------- ------- -
------ --- ----------------- ------- -- -
------------- -- -
-- ------ --
-----------
-- ------
---
-
----- -------- --------------- -
------ --- ----------------- ------- -- -
------------- -- -
-- --------
------------ ----- ---------
-- ------
---
-
------------总结
Promise 和 async/await 是 JavaScript 中非常重要的异步操作机制，它们的出现大大方便了开发者的异步编程。但是，使用它们时需要注意防止回调地狱和同时使用过多的 Promise 对象导致代码混乱。建议在编程时深入理解其原理，把握好使用方法。
参考链接
- 阮一峰：ECMAScript 6 入门 - Promise 对象
- 阮一峰：ECMAScript 2017 新特性 - async 函数
- Promise - MDN
- async function - MDN
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64589d53968c7c53b0af5426