ES9 中的 async/await 语法完全指南-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，异步编程是非常常见的一种编程方式。ES9 中，async/await 语法成为了异步编程的重要组成部分，其可以有效简化异步编程代码的写作。

async/await 简介

为了更好地理解 async/await，我们先来了解一下 JavaScript 中的异步编程。以传统的回调函数方式为例，我们在异步的 API 中传入回调函数，当异步任务执行完成时，通过调用回调函数来通知异步任务已完成。例如：

doSomethingAsync(callback);

这种异步编程方式的问题在于嵌套过多会形成“回调地狱”，代码可读性和可维护性都变得差。ES6 中，引入了 Promise，组织了回调函数的嵌套，但是连续的多个异步任务依然需要用 then() 连接起来。例如：

doSomethingAsync().then(function() {
  return doAnotherThingAsync();
}).then(function() {
  return doSomethingElseAsync();
}).catch(function() {
  console.error('出错了');
})

而 ES9 中，async/await 的出现则让异步编程变得更加简单、可读、易维护。

async/await 具有以下特性：

async 函数返回一个 Promise 对象。
async 函数内部使用 await 来等待 Promise 对象完成执行。
await 只能在 async 函数内部使用。

async 函数

async 函数是一类定义异步函数的函数，其使用 async 关键字声明。async 函数返回一个 Promise 对象，使用 try-catch 语句处理异步任务出错的情况。例如：

async function asyncFunction() {
  try {
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

首先声明了一个 async 函数，并在函数体内通过 await 等待异步任务的完成。当异步任务完成时，将返回的值赋给 result，然后将其打印到控制台上。如果异步任务出错，将会被 catch 捕获，打印错误信息。

需要注意的是，async 函数的返回值将是一个 Promise 对象。这个 Promise 对象包含了 async 函数体内的所有逻辑，它的状态将根据异步任务的完成情况来决定。

await 表达式

await 是用来等待一个 Promise 对象返回的值，它只能在 async 函数体内使用。如果其后面跟着的不是 Promise 对象，它会将其转换成 resolved 状态的 Promise 对象并返回。例如：

// 等待 promise 返回的结果
const result = await promise;

// 等待常量返回的值
const value = await 1;

需要注意的是，在 await 表达式之前的语句都将同步执行，而在 await 表达式之后的语句将会作为一个异步任务进行提交，只有当它执行完成后才会执行后续代码。

async/await 的实例

在实际开发中，我们经常会遇到需要加载一组数据的场景，而这组数据可能需要进行异步加载。在引入 async/await 的情况下，这个操作可以变得非常简单：

-- -------------------- ---- -------
----- -------- - ----- -- -- -
  --- -
    ----- ------- - ----- ------------------------- --------------
    ---------------------
  - ----- ------- -
    ---------------------
  -
-

----- --------- - ----- -- -- -
  ----- ---- - ----- --------------------------
  ------ ------------
-

----- --------- - ----- -- -- -
  ----- ---- - ----- --------------------------
  ------ ------------
-

在上述代码中，我们先定义了 loadData 函数，该函数内部通过 Promise.all() 方法并行调用了 loadData1 和 loadData2 两个异步任务进行数据加载。当两个异步任务都执行成功时，将两个异步任务返回的结果合并到 results 数组中，并将其打印到控制台。如果其中一个异步任务出错，将会被 catch 捕获，打印错误信息。

loadData1 和 loadData2 函数通过 fetch() 方法异步加载数据，返回一个 Promise 对象，并使用 await 等待其完成。异步状态 resolved 时，将使用 data.json() 方法将其转换成 JSON 格式的数据并返回。

总结

通过 async/await，我们可以将异步编程变得更加简单化、可读化、可维护化。其令异步编程的风格变得更加靠近同步编程，使得异步任务的组织变得更为简单。同时，async/await 还可以使 Promise 更加好用和容易使用。

在实际开发中，我们需要深入掌握 async/await 的使用方法和规范，这将有助于我们理解业务逻辑，并优化我们的代码实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64705b65968c7c53b0e7bece