随着 JavaScript 在现代 Web 开发中的普及，开发人员越来越需要一种简洁易懂的方式来处理异步代码，以确保应用程序的流畅性和性能。在 ECMAScript 2017（ES8）中，我们看到了一种新的异步编程模型，它被称为 async/await。本文将详细介绍 async/await，以及如何使用它来等待 JavaScript 函数完成。
什么是 async/await？
async/await 是一个异步编程模型，它建立在 JavaScript 的 Promise 之上。异步代码通常采用回调函数、Promise 或者事件处理程序来处理，而 async/await 提供了更简单和更直观的方式来处理异步代码。async/await 让异步代码看起来像同步代码，并且使代码更易于理解和维护。
如何使用 async/await 等待函数完成？
使用 async/await 等待 JavaScript 函数完成的过程分为两个步骤：首先在函数声明前加上 async 关键字来将其声明为异步函数，然后使用 await 关键字等待其完成。
async function myFunction() {
// some asynchronous code here
const result = await myPromise();
return result;
}注意，await 关键字只能在异步函数中使用。如果在其他函数中使用 await，编译器会抛出语法错误。
async/await 函数的优点
- 更简洁的代码：使用 async/await 可以让异步代码看起来像同步代码，因此更易于理解和维护。
- 更好的错误处理：使用 try/catch 语句处理异步代码中的错误，而不需要使用回调函数或者 Promise 的错误处理方法。
- 更高的可读性：async/await 代码更易于阅读和理解。
使用 async/await 的示例代码
下面是一个使用 async/await 的示例代码，它使用 async/await 等待异步函数获取数据后，使用模板字符串将数据插入到 HTML 中。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ---------------
-------
------
---- ----------------
--------
----- -------- --------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
----- -------- ------------- -
----- ---- - ----- ----------
----------------------------------------- - -
---------- ------------------
------------- ---------------------
--
-
--------------
---------
-------
-------在这个示例代码中，getData 函数使用 async/await 等待异步函数获取 JSON 数据。然后，displayData 函数使用 async/await 等待 getData 函数完成，并使用模板字符串将数据插入到 HTML 中。最后，使用 displayData 函数显示数据。
总结
在 ECMAScript 2017（ES8）中，我们看到了一种新的异步编程模型，它被称为 async/await。async/await 提供了更简单和更直观的方式来处理异步代码。使用 async/await 可以让异步代码看起来像同步代码，因此更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520d80995b1f8cacd84c180