ECMAScript 2017 (ES8) 的 Async 函数与 await 表达式详解

概述

ES8 是 ECMAScript 的第 8 个版本,它在 Async 函数与 await 表达式上做出了显著的改进。Async 函数是一种基于 Promise 的语法糖,能够使异步代码更加易读、易写。Await 表达式则是 Async 函数中的一种关键字,能够让 JavaScript 停止执行,直到一个 Promise 被 resolve 或 reject,从而在代码中处理异步控制流。

Async 函数

Async 函数在语法上类似于 Generator 函数,使用 async 关键字来声明。Async 函数自动返回一个 Promise 对象,并且能够在函数中使用 await 表达式来等待 Promise 对象的解决或拒绝。

下面是一个示例 Async 函数:

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

在这个示例中,我们使用了 fetch 函数来异步获取一个远程 JSON 文件,并使用 await 语法等待 Promise 对象的解决。注意,我们可以在 Async 函数中使用 return 语句来返回 Promise 对象的值,这将在 Promise 对象解决时执行。

我们也可以使用 Promise.all 函数来同时运行多个 Async 函数:

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

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

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

在这个示例中,我们使用 Promise.all 函数来同时并发获取多个远程 JSON 文件,并分别等待它们解决。

Await 表达式

Await 表达式出现在 Async 函数中,用于等待一个 Promise 对象的结果。当 Await 表达式出现时,JavaScript 执行中断,直到 Promise 对象被解决或拒绝,然后继续执行后面的代码。

下面是一个简单的示例,演示了 Await 表达式的作用:

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

----------

在这个示例中,我们使用 Promise 延迟 2 秒钟以模拟异步请求,随后我们等待 Promise 对象完成,并打印输出结果。

结论

Async 函数和 Await 表达式提供了一种更加简洁易读的方式来处理异步流程,并能够使代码更加易于维护。虽然它们是相对新的语言特性,但它们已经广泛被支持,并且在现代 JavaScript 和 Web 开发中已经变得日益重要。学习使用 Async 函数和 Await 表达式是每个现代前端开发人员必须掌握的基本技能。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721ed662e7021665e096df0