Promise 的基本概念及和 Generator 一起使用的上手指南

阅读时长 6 分钟读完

在前端开发中,异步操作是很常见的操作。例如从服务器获取数据,图片加载等。在 JavaScript 中,由于异步操作是单线程执行的,所以不能直接使用同步的方式来获取异步操作的返回结果。而 Promise 就是为了解决这个问题而诞生的。

Promise 的基本概念

Promise 是一种可以用来处理异步操作的方式,它用链式调用的方式来管理异步操作。Promise 是一个对象,它表示一个异步操作的最终完成或失败,并可以异步地返回它的值或原因。Promise 对象有三种状态:

  • pending - 初始状态,不是成功或失败状态。
  • fulfilled - 意味着操作成功完成。
  • rejected - 意味着操作失败。

Promise 对象一旦进入 fulfilledrejected 状态,就会被称为 settled。

当一个 Promise 进入 settled 状态后,我们可以通过调用 .then() 方法来获得异步操作执行后的结果。.then() 接收两个参数:

  • 一个回调函数,当完成时被调用,它接收异步操作的结果作为参数。
  • 一个回调函数,当失败时被调用,它接收错误信息作为参数。

Promise 链式调用

使用 Promise 可以通过链式调用来依次执行多个异步操作。这样可以让代码更加简洁易懂,避免了回调地狱。

例如,我们可以通过以下的方式来执行三个异步操作:

上面的代码中,getData() 返回一个 Promise,.then(processData) 接收 getData() 返回的 Promise 的值,并通过 processData() 函数处理它的返回值,.then(renderView) 接收 processData() 函数的返回值,并通过 renderView() 函数渲染界面。如果有任何一个 Promise 发生了错误,.catch(handleError) 会捕获该错误。

Promise 的错误处理

在 Promise 链中,可以使用 .catch() 方法来捕获错误。如果链中的某个 Promise 在执行时发生了错误,错误会被向下传递,直到被 .catch() 方法捕获。

例如,在下面的示例中,如果任何一个 Promise 发生了错误,错误信息会被 catch 方法捕获并打印出来:

Promise 的超时处理

我们可以使用 Promise.race() 方法来设置超时时间。如果一个 Promise 在规定的时间内没有完成,它就会被认为是被超时了。

例如,下面的代码展示了如何在 5 秒钟内等待异步操作完成。如果 5 秒钟内异步操作没有完成,它就会被认为是超时:

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

Promise 的并发执行

Promise.all() 可以将多个 Promise 并发执行,它会等待所有的 Promise 完成后,才会执行 .then().catch() 中的回调函数。

例如,下面的代码中,getStockPrice() getExchangeRate() 会在并发进行,一旦它们两个都成功,convertCurrency() 才会开始执行。

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

和 Generator 一起使用的上手指南

使用 Generator 可以将 Promise 的链式调用转换为同步代码的方式,大大简化的代码,并可改善 Promise 的错误处理、异常传递等问题。

Generator 是一种函数类型,它可以被暂停执行,然后再次恢复执行。在执行 Generator 函数时,会返回一个可以控制 Generator 函数运行的 Iterator 对象。

Generator 的基本语法与函数相似,但有两个新的关键字:yieldyield*

  • yield 暂停 Generator 函数的执行,并向调用者返回一个值。
  • yield* 把 Generator 函数的执行权转移到另外一个 Generator 函数。

下面的代码展示了如何通过 Generator 函数来实现 Promise 的同步调用:

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

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

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

上面的代码中,fetchUser() 函数是一个 Generator 函数,其中使用了 try...catch 来捕获异常。在执行 Generator 函数时,使用 .next() 方法来生成 Iterator 对象,并通过 .value 属性来获取要执行的 Promise。在执行 Promise 时,需要将 Promise 的值通过 Generator.next() 向下传递。

总结

本文介绍了 Promise 的基本概念,并讲解了如何使用 Promise 来解决异步操作的问题。同时,我们还学习了 Promise 的错误处理、超时处理、并发执行等技巧。最后,我们讲解了如何将 Promise 和 Generator 结合使用,以便将 Promise 的异步调用转换为同步代码的方式。希望本文能够帮助大家掌握 Promise 的基本使用方法和细节,从而更好的进行前端开发。

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

纠错
反馈