ECMAScript 2021 中的 async/await+Promise 使用详解
在前端开发中，异步操作是不可避免的。
为了更好地处理异步操作，ECMAScript 6 引入了 Promise，它带来了一种以更简单的方式处理异步操作的方法。
ECMAScript 2021 中新增的 async/await 关键字可以进一步简化 JavaScript 中的异步操作，使得代码更加紧凑、易读，并且错误处理更加优雅。
但是，async/await 结合 Promise 的使用方式有许多细节需要注意，本文将为大家详细解释它们的使用，并提供示例代码供大家参考。
一、Promise 概述
Promise 中文翻译为“承诺”，它可以让我们更好地处理异步操作。异步操作的结果不一定是立即获得的，而是需要等待一段时间才能获得。Promise 提供了一种处理异步操作的简单方式，并支持链式操作。
1.1 Promise 的状态
Promise 对象有三种状态：
- Pending：初始状态，不是成功或失败状态。
- Fulfilled：意味着操作成功完成。
- Rejected：意味着操作失败。
状态由异步操作的结果决定。如果在异步操作中发生了错误，Promise 将进入 Rejected 状态。
1.2 Promise 的基本用法
下面是 Promise 的基本用法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ------
---------------
------------ -- -
----------------
--
------------ -- -
--------------
---
---
------------------- -- -
-- - ------- ---
-------------- -- -
-- - ------ ---
---在 Promise 中，我们需要创建一个 Promise 实例，并将异步操作传递给它。当异步操作成功时，我们会调用 resolve 函数，并将结果传递给它。当异步操作失败时，我们会使用 reject 函数，并将错误传递给它。
在实际使用时，我们可以使用 Promise 的 then() 方法来处理 resolve() 的结果，使用 catch() 方法来处理 reject() 的结果。
二、async/await 关键字
async/await 关键字是 ECMAScript 2021 中引入的一种简化异步操作代码的方式。它只是 Promise 的语法糖，让我们编写更加紧凑、易读、可维护性更高的异步代码。
async/await 关键字是一种被称为“语法糖”的东西，它可以让异步代码更加紧凑。语法糖不是一种新的语言特性，它只是一个更加方便的语法，用于标记现有语法的一种变体。
2.1 async 关键字
async 关键字是用来标记一个函数为异步函数的。异步函数将会返回一个 Promise 对象，并且它的内部可以使用 await 关键字来等待异步操作的结果。
下面是 async 函数的基本用法：
async function asyncFunction() {
// 执行异步操作
const result = await promise;
return result;
}在上面的代码中，我们使用 async 关键字标记了一个函数为异步函数。在该函数内部，我们使用 await 关键字来等待 Promise 对象的返回结果。
注意，使用 async 关键字标记的函数会返回一个 Promise 对象，它的 resolve 值为函数的返回值。
2.2 await 关键字
await 关键字可以让我们写出更加紧凑且易读的代码，它用于等待 Promise 对象的结果。如果 Promise 对象进入了 Fulfilled 状态，则 await 表达式返回其 resolve 值；如果 Promise 对象进入了 Rejected 状态，则抛出一个错误。
下面是 await 关键字的基本用法：
-- -------------------- ---- -------
----- -------- --------------- -
--- -
-- --------
----- ------ - ----- --------
------ -------
- ----- ------- -
----- --- --------- ----- ---------- - -------
-
-在上面的代码中，我们使用 try/catch 块来处理 Promise 对象的 reject 状态。如果 promise 进入 Rejected 状态，则将错误信息传递给 catch 块。如果异步操作成功，则将 resolve 值返回。
2.3 async/await 和 Promise 结合使用
async/await 和 Promise 可以很好地结合使用，让我们更好地处理异步操作。
下面是 async/await 和 Promise 的结合使用示例：
-- -------------------- ---- -------
----- -------- --------------- -
--- -
----- ------ - ----- --- ----------------- ------- -- -
-- ------
----------------
------------ -- -
----------------
--
------------ -- -
--------------
---
---
------ -------
- ----- ------- -
----- --- --------- ----- ---------- - -------
-
-在上面的代码中，我们在异步函数中使用了 Promise，Promise 的 resolve 值被转换成了 async/await 函数的返回值。
另外，可以使用 Promise.all() 方法来等待多个异步操作完成后再处理。
下面是 Promise.all() 方法的示例：
async function asyncFunction() {
try {
const results = await Promise.all([promise1, promise2, promise3]);
return results;
} catch (error) {
throw new Error('An error occurred:' + error);
}
}在上面的代码中，我们可以使用 Promise.all() 方法来等待多个 Promise 对象完成，一旦完成，我们可以在 then() 方法中处理结果。
三、总结
async/await 是 ECMAScript 2021 中引入的一种简化异步操作代码的方式，它是 Promise 的语法糖，让我们可以更加紧凑、易读地处理异步代码。
在 async/await 中，我们使用 async 关键字来标记一个函数为异步函数，使用 await 关键字来等待异步操作的结果。
async/await 和 Promise 可以很好地结合使用，让我们更好地处理异步操作。本文为大家详细讲解了 async/await 和 Promise 的用法，并提供了示例代码供大家参考和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64747031968c7c53b01d08f0