ECMAScript 2019 中如何将 Promise 转换为 async 和 await

阅读时长 6 分钟读完

ECMAScript 2019 中如何将 Promise 转换为 async 和 await

在 JavaScript 开发中,Promises 是一种常用的异步编程方法,它让我们可以更容易地处理异步操作和代码复杂性。但是,Promises 仍然需要大量的回调函数和嵌套,很难处理逻辑,比如说错误处理和多个异步操作组合。因此,ES2017 引入了 async 和 await 关键字,它们提供了更简单和可读的方式来处理异步代码。本文将介绍如何将 Promise 转换为 async 和 await,并给出相关的示例代码。

  1. 什么是异步编程?

在 JavaScript 中,我们经常需要处理异步操作,比如说从服务器获取数据、读取文件等等。例如:

上述代码包含三个语句,第一个语句 console.log('Start') 会立即执行,输出 Start。第二个语句会延迟 1 秒执行,输出 End。第三个语句会立即执行,输出 Next。因此,上述代码执行的结果是:

由此可见,异步操作可能会在后面执行,代码的执行顺序并不是我们期望的顺序。在异步编程中,我们需要等待异步操作完成之后再执行后续的代码。

  1. Promises

Promises 是用于处理异步操作的对象。它的基本思想是在异步操作完成时执行某些代码。Promises 可以解决回调函数带来的嵌套和可读性差的问题。

一个 Promise 有三种状态:pending、resolved、rejected。在 promise 进入 resolved 或 rejected 状态之前,称为 pending 状态。当 promise 从 pending 状态过渡到 resolved 状态时,它调用相应的回调函数来处理成功的值。当 promise 从 pending 状态过渡到 rejected 状态时,它调用相应的回调函数来处理错误信息。

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

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

上述代码中,我们创建了一个 Promise 对象,它是一个异步操作,并且随机返回成功或失败。当 Promise 进入 resolved 状态时,调用 .then() 方法来打印成功的值。当 Promise 进入 rejected 状态时,调用 .catch() 方法来打印错误信息。

  1. async 和 await

ES2017 引入了 async 和 await 两个关键字,它们构成了一种更简单和可读的异步编程方式。async 关键字用于声明一个异步函数,它会自动返回一个 Promise 对象。await 关键字用于暂停异步函数的执行,直到 Promise 进入 resolved 或 rejected 状态。await 关键字只能在 async 函数中使用。

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

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

上述代码中,我们定义了一个异步函数 getWeather(),它使用了 await 关键字来等待 fetch() 函数的结果。fetch() 函数是一种异步函数,它返回一个 Promise 对象,因此我们可以在 getWeather() 函数中使用 await 来暂停执行,直到 Promise 进入 resolved 状态。getWeather() 函数返回一个 Promise 对象,并可以使用 .then().catch() 方法来处理结果和错误。

  1. 将 Promise 转换为 async 和 await

我们可以使用 async 和 await 来将 Promise 转换为更可读和简单的代码。我们可以将 Promise 对象赋值给变量并使用 await 等待 Promise 结果。下面是示例代码:

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

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

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

上述代码中,我们定义了一个 Promise 对象 promiseExample(),它会等待 1 秒后返回一个字符串 'Promise Example'。然后,我们定义了一个 async 函数 asyncExample(),它使用了 await 关键字等待 promiseExample() 函数的返回值。在 asyncExample() 函数中我们可以像普通的同步函数一样访问变量 result

  1. 结论

在 JavaScript 中,异步编程是必不可少的,而 async 和 await 关键字提供了简单和可读的方式来处理异步操作。使用 async 和 await 可以消除一些常见的异步编程问题,比如说回调函数和异步操作的嵌套。我们应该尽可能地使用 async 和 await,以提高代码的可读性和可维护性。

参考资料:

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67067576d91dce0dc85d4b6d

纠错
反馈