JavaScript 是一种异步编程语言。异步编程意味着代码不会按照预定的顺序执行，而是分散在多个事件发生时执行。这种编程方式在 Web 开发中很常见，例如，通过请求服务器后再执行其他代码。然而，异步编程也是 JavaScript 中最困难的编程难题之一。ES8 引入了 async 和 await 关键字，以使异步编程更容易、更易于调试。
什么是 async 和 await
async 和 await 是 ES8 中引入的新的关键字，用于帮助 JavaScript 异步编程更容易实现和理解。
async 用于定义一个函数，该函数在执行时总是返回 Promise 对象。
async function fetchData() {
const response = await fetch('https://example.com/data') // fetch 返回 Promise 对象
const data = await response.json() // response.json() 也返回 Promise 对象
return data
}在这个示例中，fetchData 函数使用 fetch 函数获取数据。fetch 函数返回 Promise 对象，可以使用 await 等待 Promise 对象解决，然后使用 await 等待 json 解析 Promise 对象解决。
await 用于等待 Promise 对象，直到该 Promise 对象的状态为 resolved。如果 Promise 对象被 reject，则抛出异常。如果 Promise 对象的状态已经解决，则 await 将返回 Promise 对象的解决值。 await 仅能在 async 函数内使用。
-- -------------------- ---- -------
----- -------- --------- -
----- ------- - --- ----------------- ------- -- -
------------- -- --------------------- -----
--
----- ------ - ----- -------
-------------------
-
---------在这个示例中，创建了一个 Promise 对象，并在 1s 后解决为 "finished!"。这个 Promise 对象用 await 等待，直到该 Promise 对象变为 resolved。当完成时，输出结果（"finished!"）。
async 和 await 的优点
使用 async 和 await 可以带来许多优点：
- 简化异步代码：与使用 Promise 对象时相比，复杂代码会更易于阅读和编写，因为 async 和 await 代码看起来像同步代码。
- 更好的错误处理：使用 try-catch 语句来处理异常，使异步代码中的调试更容易。当异步过程出现错误时，异常将被捕获并通过 try-catch 块中的 catch 语句进行处理。
- 在代码中创建更少的中间变量：使用 async 和 await，可以避免大量的.then() 代码和中间变量。
如何使用 async 和 await
async 和 await 关键字可轻松替代 Promises。使用以下步骤来使用 async 和 await：
1.将函数定义为 async。
2.在需要的地方使用 await 等待 Promise 对象解决。
3.通过 try-catch 处理可能的异常。
下面是一个示例，展示如何使用 async 和 await：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ---------------------------------
----- ---- - ----- ---------------
------ ----
- ----- ------- -
--------------------
-
-
----------------------- -- -
-----------------
--在这个示例中，通过 async 定义 fetchData 函数，并使用 await 在异步过程中等待 Promise 对象解决。如果发生异常，则使用 catch 处理异常。最后，fetchData 函数返回 data，然后打印它。
结论
异步编程是 JavaScript 编程中最具挑战性的部分之一，而 ES8 中的 async 和 await 可以使此过程更加容易和可读。使用 async 和 await，可以编写更加优雅和可读的异步代码，避免大量的中间变量和重复的代码。此外，通过使用 try-catch 语句来处理错误，代码的调试也更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ed1f1e884a3e30f2a3687