如何使用 JavaScript Promise 处理多个异步操作?

阅读时长 4 分钟读完

如何使用 JavaScript Promise 处理多个异步操作?

在前端开发中,经常需要处理多个异步操作,比如同时请求多个接口数据,或者一个接口依赖于另一个接口返回的数据。在这种情况下,使用 JavaScript Promise 可以非常有效地处理异步操作。

Promise 是 JavaScript 中一种比较新的异步编程模型。Promise 同时支持异步和同步操作,能够方便地处理数据异步请求,并且多个异步操作可以调度执行。

下面我们通过一个示例来介绍如何使用 JavaScript Promise 处理多个异步操作。

假设我们需要同时请求两个接口数据,获取用户信息和用户订单信息,并将两个接口返回的数据合并为一个对象。首先我们需要定义两个异步函数获取数据,分别为 getUserInfo 和 getOrderInfo。

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

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

getUserInfo 函数和 getOrderInfo 函数都返回一个 Promise 对象,这个对象会在异步操作结束后,调用 resolve 函数或 reject 函数处理结果。

接下来,我们可以使用 Promise.all 方法并行调用两个异步函数,等待这两个请求都完成,然后将结果合并。

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

Promise.all 方法接收一个数组作为参数,该数组包含并行调用的异步函数。当所有异步函数都完成后,Promise.all 方法返回一个包含所有异步函数返回值的数组。

在本例中,我们将两个异步函数 getUserInfo 和 getOrderInfo 作为 Promise.all 方法的参数,调用时获得一个 Promise 对象。当两个异步函数都完成后,then 方法会执行,并将两个异步函数返回的结果存储在 results 数组中。

最后,我们将两个异步函数返回的数据合并成一个对象,并输出到控制台中。

总结一下,JavaScript Promise 提供了一种简单而有效的处理异步操作的方式。通过使用 Promise.all 方法并行执行多个异步函数,并在它们都完成后处理结果,可以更轻松地处理多个异步操作。

示例代码:https://codepen.io/nutrina/pen/mdXazPy

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

纠错
反馈