JavaScript 是一种单线程语言，因此它必须利用异步编程的机制来防止执行阻塞。在过去，使用回调函数（callback）来解决这个问题。但是，回调函数会导致嵌套深层次的代码，缺乏可读性和可维护性。这时候，async 函数应运而生。本文将详细阐述如何使用 async 函数进行异步编程，包括定义、调用和错误处理。
什么是异步编程和 async 函数
当 JavaScript 执行阻塞或需要等待某些操作完成时，它必须等待，而无法执行其他任务。这通常发生在读取文件、调用远程 API、处理大量计算等操作时。为了避免这种情况，我们需要利用异步编程机制：在等待操作完成的同时，让 JS 执行其他任务，直到操作完成。JavaScript 采用异步回调函数来实现异步编程。
在 ES2017 中，引入了 async 函数，这是异步编程的一种更易于使用的方法。它是一个返回 Promise 对象的函数，实际上就是将回调函数封装进了 Promise。async 函数让我们可以像同步编程一样编写异步代码。当在 async 函数中使用 await 关键字时，其会暂停函数的执行并等待 Promise 对象被解决（resolved），然后继续执行 async 函数后面的步骤。这种方式使得异步编程代码类似于同步执行的代码，更容易阅读和维护。
async 函数的定义
定义一个 async 函数很简单。使用 async 关键字将函数标识为异步函数。它有一个形式参数（形参）列表，由 async 函数使用。函数体（内部逻辑）返回 Promise 对象，该 Promise 对象解析为函数的值。以下是一个用 async 函数定义 Promise 对象的示例：
----- -------- ----- - ------ -------------------- -
调用 async 函数
当调用 async 函数时，它将立即返回一个 Promise 对象，该 Promise 对象将异步完成并解析该函数的返回值。我们可以使用 then 方法来处理 Promise 的解决结果或使用 try/catch 块来处理 Promise 的拒绝结果。
下面的代码展示了调用一个 async 函数并在控制台上输出结果的示例：
----- -------- ----- - ----------------- ------- - ------ -- -------
async 函数的错误处理
当 async 函数返回 Promise 对象时，该 Promise 对象可能是 resolved 或 rejected。我们可以使用 try/catch 块来处理 Promise 对象的拒绝结果。以下是一个 async 函数中使用 try/catch 块的示例：
----- -------- ----- -
--- -
----- ------ - ----- ------------------------------- ---- ----------
- ----- --- -
------------------------- -- -------------- ---- ------
-
-案例示例
现在，让我们来看一个完整的异步示例，它从远程 API 请求数据并在网页中呈现该数据。我们将使用 async 函数来实现这个异步示例。
----- -------- --------- -
----- --- - ----------------------------------------------- -- -- ---
--- -
----- -------- - ----- ----------- -- ---- --- ---
-- ------------- - -- --------
----- ---- - ----- ---------------- -- ------- ----
------------------------------------------- - --------------------- -- ----------- ----
- ---- - -- -----
----- --- ------------ --- --- --- ----- ------ -------- ----------------------
-
- ----- --- - -- ----
-------------------------
-
-
---------- -- --- --- -----------在上面的示例中，我们使用了 async 函数以及 fetch API 来从远程 API 请求数据。我们使用 try/catch 块来处理错误。
结论
使用 async 函数可以让我们更方便地进行异步编程，大大提高了代码的可读性和可维护性。在本文中，我们讲解了定义 async 函数、调用 async 函数和处理 async 函数的错误。希望这对于初学者能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67078204d91dce0dc869716b