在 ECMAScript 2017 中，引入了一种新的关键字 await，它可以让我们在函数内部等待另一个函数或 Promise 对象的执行结果，并且不会阻塞执行线程。那么，await 表达式到底是什么，它有哪些用途呢？本文将详细介绍 await 表达式以及其应用场景，并带您一步步了解如何使用 async/await 功能来提高代码的可读性和可维护性。
await 表达式的基本语法
await 表达式只能在 async 函数内部使用，用于等待 Promise 对象的执行结果。await 表达式可以直接接收 Promise 对象作为参数，也可以接收返回 Promise 对象的函数。当 await 表达式被执行时，函数会暂停执行，直到 Promise 对象返回结果。示例代码如下：
async function fetchData() {
const data = await fetch('https://example.com/data');
const json = data.json();
return json;
}在上面的例子中，fetch 返回一个 Promise 对象，我们可以使用 await 等待其执行结果，然后将结果转换为 JSON 格式，并返回结果。由于 await 表达式会暂停函数的执行，所以函数会一直等待直到 Promise 对象返回结果。
async/await 的优势
在过去，我们使用 Promise 对象来处理异步任务，然而，使用 Promise 构建异步任务链会导致代码嵌套层级过多，导致代码难以阅读和维护，增加了需求变更的复杂度和维护成本。相比之下，使用 async/await 功能使我们可以写出更具可读性的代码，易于理解和维护。
以下是使用 Promise 构建异步任务链的示例代码：
-- -------------------- ---- -------
---------------------------------
---------- -- ------------
---------- -- -
-- ---------
------ ---------------------------------------------
--
---------- -- ------------
---------- -- -
-- ----
--
------------ -- -
-- ----
---以上代码中，每个 .then 方法都是对上一个异步任务的结果进行处理，我们需要嵌套多层 .then 来组合多个异步任务，代码难以阅读和维护。
相反，使用 async/await 功能可以让我们避免这种嵌套，而是将异步任务写成一个顺序执行的代码块。以下是使用 async/await 功能实现同样功能的示例代码：
async function fetchData() {
const data = await fetch('https://example.com/data');
const json = await data.json();
const data2 = await fetch(`https://example.com/data/${json.id}`);
const json2 = await data2.json();
// 处理数据
}上面的示例代码中，我们只需要按照顺序执行异步任务并使用 await 等待每个异步任务的执行结果，代码即可变得简单易懂。
await 表达式的应用场景
以下是 await 表达式的一些常见应用场景：
调用异步方法
在调用异步方法时，使用 await 表达式等待异步方法的结果会让我们的代码更加直观易懂。以下是调用异步方法的示例代码：
async function getTodos() {
const response = await fetch('https://example.com/todos');
const todos = await response.json();
return todos;
}在上面的示例代码中，我们使用 await 等待数据加载完成后才返回结果。这样我们的函数就变成了同步函数的样式，而不是典型的异步回调风格。
处理多个异步操作
使用 await 表达式，我们可以依次执行多个异步操作，然后等待所有异步操作结束后才继续执行后续代码。以下是处理多个异步操作的示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------- ------ - ----- -------------
-----------------------------------
----------------------------------
---
----- ----- - ----- -------------
----- ----- - ----- -------------
-- ----
-在上面的示例代码中，我们使用 Promise.all 方法封装了多个异步操作，然后使用 await 等待它们全部执行完毕，并将结果分别赋值给变量 data1 和 data2。接下来，我们再次使用 await 等待两个异步操作的结果，然后处理数据。
错误处理
在 async/await 功能中，错误处理与 Promise 的错误处理方法非常相似。如果在异步任务中遇到错误，可以使用 try/catch 块来捕获错误。以下是错误处理的示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -----------------------------------------
-- -------------- -
----- --- -------------- ---------
-
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
------ -----
-
-在上面的示例代码中，我们使用 try/catch 块来捕获任何错误（包括 Promise 中的错误）。如果出现网络错误，我们将抛出一个自定义错误，并记录错误在控制台上。
小结
await 表达式是 ECMAScript 2017 中一个非常实用的新关键字，它可以让我们在 async 函数内部等待 Promise 对象的执行结果，并且不会阻塞执行线程。使用 async/await 功能可以写出更具可读性和维护性的代码。await 表达式常常用于调用异步方法、处理多个异步操作以及错误处理等场景。希望本文能够帮助您更好地掌握 await 表达式及其应用场景。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781f410935627c900f1528e