在前端开发中，异步编程是很常见的问题。从 ES6 开始，Promise 的出现解决了异步编程的一部分问题，但是使用 Promise 仍然存在一些问题，比如代码可读性不高，错误处理不方便等。而 ECMAScript 2017 引入了 Async 和 Await，这两个功能可以更好地解决异步编程的痛点。
Async 和 Await 是什么？
Async 和 Await 是 ES2017 中新增的关键字，它们是用来处理异步编程的。Async 函数是一个返回 Promise 对象的函数，而 Await 关键字可以用来等待 Promise 对象的解决或拒绝。
Async 函数的基本用法
Async 函数使用 async 关键字定义，它可以包含 await 表达式，这个表达式会暂停函数的执行，等待 Promise 对象的解决或拒绝。
下面是一个简单的示例：
async function foo() {
return 'hello world';
}
foo().then(result => {
console.log(result); // 输出 hello world
});在这个示例中，foo 函数返回了一个 Promise 对象，这个 Promise 对象的值是字符串 'hello world'。调用 foo 函数后，我们使用 then 方法等待 Promise 对象的解决，并在解决后输出结果。
Await 表达式的基本用法
Await 表达式只能在 Async 函数中使用，它可以等待一个 Promise 对象的解决或拒绝，并返回解决的值或拒绝的原因。
下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- ----- -
--- ------- - --- ----------------- ------- -- -
------------- -- ----------------- ------
---
--- ------ - ----- --------
-------------------- -- -- -----
-
------在这个示例中，我们定义了一个 Promise 对象，它会在 1 秒后解决，并返回字符串 'done!'。在 foo 函数中，我们使用 await 表达式等待这个 Promise 对象的解决，并将解决的值赋给 result 变量。最后我们输出 result 变量的值。
Async 函数的错误处理
Async 函数的错误处理可以使用 try/catch 语句。如果 Async 函数中抛出了一个错误，它会拒绝返回的 Promise 对象，并且这个错误可以被 try/catch 语句捕获。
下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- ----- - ----- --- --------------- - --- - ----- ------ - ----- ------- - ------------------- -- -- ------ ----- -
在这个示例中，foo 函数抛出了一个错误，这个错误会拒绝返回的 Promise 对象。我们使用 try/catch 语句捕获了这个错误，并在 catch 中输出错误信息。
Async 函数的并行执行
Async 函数的并行执行可以使用 Promise.all 方法。Promise.all 方法可以接收一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象会在数组中所有的 Promise 对象都解决后解决，并返回一个包含所有解决值的数组。
下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- ----- -
--- -------- - --- ----------------- ------- -- -
------------- -- --------------- ------
---
--- -------- - --- ----------------- ------- -- -
------------- -- --------------- ------
---
--- ------ - ----- ---------------------- -----------
-------------------- -- -- ------- ------
-
------在这个示例中，我们定义了两个 Promise 对象，它们会在 1 秒和 1.5 秒后解决，并返回字符串 'foo' 和 'bar'。在 foo 函数中，我们使用 Promise.all 方法并行执行这两个 Promise 对象，并等待它们的解决。最后我们输出包含解决值的数组。
Async 函数的顺序执行
Async 函数的顺序执行可以使用 for...of 循环。for...of 循环可以依次迭代一个可迭代对象，并返回每个迭代元素的值。
下面是一个简单的示例：
-- -------------------- ---- -------
----- -------- ----- -
--- -------- - ---
--- ---- - - -- - - -- ---- -
----------------- ----------------- ------- -- -
------------- -- ----------- ------
----
-
--- ---- ------ -- --------- -
-------------------- -- ---- -- -- -- -- -
-
-
------在这个示例中，我们定义了一个包含 5 个 Promise 对象的数组，它们会在 1 秒后解决，并返回它们的索引值。在 foo 函数中，我们使用 for...of 循环依次输出这些 Promise 对象的解决值。
总结
Async 和 Await 是 ES2017 中新增的关键字，它们可以更好地解决异步编程的痛点。Async 函数是一个返回 Promise 对象的函数，它可以包含 await 表达式，这个表达式会暂停函数的执行，等待 Promise 对象的解决或拒绝。Await 表达式只能在 Async 函数中使用，它可以等待一个 Promise 对象的解决或拒绝，并返回解决的值或拒绝的原因。Async 函数的错误处理可以使用 try/catch 语句，而 Async 函数的并行执行可以使用 Promise.all 方法，Async 函数的顺序执行可以使用 for...of 循环。掌握 Async 和 Await 可以让我们更好地处理异步编程，提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dd9a071886fbafa4aefcbf