ES6 中的 Promise 和 async 和 await

阅读时长 4 分钟读完

在 JavaScript 中,处理异步操作时,过去我们通常会使用回调函数来处理。但是当代码嵌套多层时,很容易导致回调地狱(callback hell),使代码难以维护和理解。ES6 提供了一些新的特性,使我们更容易地处理异步操作,其中包括 Promise 和 async 和 await。

Promise

Promise 是一个代表了异步操作最终完成或失败的对象。Promises 可以让我们更好地处理异步操作的结果,而不需要嵌套回调函数。

一个 "promise" 有三个状态:

  • pending:初始状态,不是 fulfilled(已完成)或 rejected(已失败)状态之一。
  • fulfilled:意味着操作成功完成。
  • rejected:意味着操作失败。

Promise 构造函数有两个参数:执行器函数和可选的错误处理函数。执行器函数在 Promise 对象中定义异步操作。如果操作成功,它会调用resolve()函数;如果出现错误,它会调用 reject() 函数,这会导致 Promise 对象被拒绝。

下面是一个简单的 Promise 示例:

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

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

在上述示例中,myPromise 代表了一个异步操作,它将在 1000 毫秒后返回成功或失败的结果。如果操作成功完成,将调用 resolve() 函数并返回 "Success!";如果操作失败,将调用 reject() 函数并返回 "Failed!"。

then() 方法是 Promise 的一个方法,它接收一个函数作为参数,该函数接收由 resolve() 方法返回的结果作为参数。catch() 方法也是 Promise 的一个方法,它接受一个函数作为参数,该函数用于处理异常情况。

async 和 await

async 和 await 是 ES2017(ES8)提供的一个步骤更进的异步编程模式,有效地解决了回调地狱的问题。

async 函数是一个返回 Promise 对象的函数。当函数前面有 async 关键字时,函数就会自动变成 Promise 对象。async 函数内部使用的 await 关键字会让 JavaScript 引擎暂停运行,直到 Promise 完成并返回一个结果。

下面是一个示例,该示例使用了 async 和 await 来处理异步操作:

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

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

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

在上述示例中,我们使用了一个自定义的 delay 函数来模拟一个异步操作。fetchData 函数使用了 async 关键字,以及使用了 await 关键字来暂停代码的运行,直到 Promise 对象被解决。try/catch 语句用于在异步操作发生错误时捕获异常。

结论

使用 Promise 和 async 和 await 可以使我们更容易地处理异步操作,避免回调地狱,使我们的代码更易于维护和理解。这两个功能是 ES6 的关键新特性,任何人在学习 JavaScript 中处理异步操作时,都应该掌握它们。

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

纠错
反馈