如何使用 Promise.allSettled 返回所有结果

阅读时长 5 分钟读完

在前端开发过程中, 往往需要对多个异步请求进行处理, 而 Promise.allSettled 可以方便地用于处理多个异步请求, 并且返回所有结果。本文将详细介绍 Promise.allSettled 的使用, 并且提供示例代码。

Promise.allSettled 介绍

Promise.allSettled 是 Promise 中一个非常重要的方法, 它和 Promise.all 方法不同的是, 当所有promise对象状态为已完成或已失败时,它都会返回一个数组,该数组包含每个promise对象的结果(无论是否成功)而不是在一个promise集合中以同时方式返回。

Promise.allSettled 方法返回的数组中每一个成员都是对象,这个对象包含了状态是 'fulfilled' 或 'rejected' 的对象。

Promise.allSettled 方法可以在不关心每一个Promise 的执行结果是否成功,而仅仅关注每个Promise 是否已经执行完毕的场景中得到非常好的运用。

示例代码

下面给出一个示例, 来展示如何使用 Promise.allSettled 方法:

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

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

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

代码中, 先定义了三个异步请求 promise1, promise2 和 promise3, 分别都有不同的处理结果。可以看到, 当使用 Promise.allSettled 方法时,返回的数组包含了每个Promise的执行结果,无论成功或者失败,都会返回。

案例分析

在实际开发过程中,通常需要对多个接口进行请求,然后对返回结果进行汇总或者筛选。假设我们需要访问3个API接口,API1返回用户信息,API2返回订单信息,API3返回商品信息。

在传统的处理方法中, 通常使用三个Promise对象来分别执行访问3个API接口, 然后在所有结果返回后进行结果的整合操作:

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

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

这种设计对于3个接口例子比较简单数量,如果要访问的接口多了,情况会变得越来越复杂。使用 Promise.allSettled 方法则简单得多,可以用一个 Promise.allSettled 方法执行多个 Promise,然后对每个 Promise 的结果进行统一处理。

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

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

以上代码采用 Promise.allSettled 方法执行多个 Promise,然后通过解析 Promise 返回的结果集合,对每个 Promise 的处理结果进行统一的处理。

总结

本文介绍了 Promise.allSettled 方法在前端开发中的应用, 可以方便地处理多个异步请求,并且返回所有结果。在实际开发中, 可以大大地提高开发效率。同时, 本文提供了使用示例代码,并且对示例代码进行了详细分析,希望对读者有所帮助。

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

纠错
反馈