在 JavaScript 开发中，异步操作是非常常见的。例如，通过 Ajax 获取数据、操作 DOM 元素等都需要异步操作。在过去，我们通常使用回调函数来处理异步操作，但是这种方式容易出现回调地狱（callback hell）问题，导致代码可读性和可维护性变差。ECMAScript 2018 引入了 Async/Await，这是一种更加简单、可读性更好的处理异步操作的方式。本文将详细介绍 Async/Await，并通过示例代码演示其使用方法。
Async/Await 是什么？
Async/Await 是 ECMAScript 2018 中新增的语法，它是基于 Promise 的一种更加简单、可读性更好的处理异步操作的方式。Async 函数是一个返回 Promise 对象的函数，可以使用 await 关键字来等待 Promise 对象的状态变化。使用 Async/Await 可以使异步代码看起来像同步代码，从而提高代码的可读性和可维护性。
Async 函数
Async 函数是一个返回 Promise 对象的函数。定义 Async 函数时，在函数前加上 async 关键字即可：
----- -------- ----- - -- --- -
Async 函数内部可以使用 await 关键字来等待 Promise 对象的状态变化。await 关键字只能在 Async 函数内部使用。例如，下面的代码演示了使用 await 等待 Promise 对象的状态变化：
----- -------- ----- - ----- ------ - ----- -------------- -------------------- -
在上面的代码中，somePromise() 返回一个 Promise 对象。使用 await 关键字等待 Promise 对象的状态变化后，将返回的结果赋值给 result 变量，并将其输出到控制台。
Await 关键字
Await 关键字只能在 Async 函数内部使用。它可以等待 Promise 对象的状态变化，并返回 Promise 对象的结果。如果 Promise 对象的状态变为 resolved，则将返回 Promise 对象的 resolve 值。如果 Promise 对象的状态变为 rejected，则将抛出 Promise 对象的 reject 值。
下面的代码演示了使用 await 等待 Promise 对象的状态变化：
----- -------- ----- - ----- ------ - ----- -------------- -------------------- -
在上面的代码中，使用 await 等待 somePromise() 的状态变化。如果 somePromise() 的状态变为 resolved，则将返回 Promise 对象的 resolve 值，并将其赋值给 result 变量。如果 somePromise() 的状态变为 rejected，则将抛出 Promise 对象的 reject 值。
示例代码
下面的代码演示了使用 Async/Await 处理异步操作的示例。在这个示例中，我们使用 Async/Await 来等待 Promise 对象的状态变化，并在 Promise 对象的状态变为 resolved 后，将返回的结果输出到控制台。
----- -------- --------- - ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ------------------ - ----------
在上面的代码中，我们使用 fetch() 函数来获取数据。fetch() 函数返回一个 Promise 对象，我们使用 await 等待 Promise 对象的状态变化。如果 Promise 对象的状态变为 resolved，则将返回 Response 对象，并将其赋值给 response 变量。使用 await 等待 Response 对象的 json() 方法的返回值，将返回的数据解析为 JSON 格式，并将其赋值给 data 变量。最后，将解析后的数据输出到控制台。
总结
Async/Await 是 ECMAScript 2018 中新增的语法，它是基于 Promise 的一种更加简单、可读性更好的处理异步操作的方式。Async 函数是一个返回 Promise 对象的函数，可以使用 await 关键字来等待 Promise 对象的状态变化。使用 Async/Await 可以使异步代码看起来像同步代码，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cd7609add4f0e0ff6b29df