JavaScript Promise

什么是Promise?

Promise是JavaScript中处理异步操作的一种对象。它代表一个异步操作的最终完成(或失败)及其结果值。Promise提供了一种更优雅的方式来处理异步代码,避免了回调地狱。

Promise的基本使用

Promise有三种状态:pending(待定)、fulfilled(已成功)和rejected(已失败)。一旦状态改变,就不会再变。Promise对象可以接受两个参数作为回调函数:resolvereject

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

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

Promise的方法

Promise对象提供了多个方法来处理异步操作:

  • then(onFulfilled, onRejected):用于指定操作成功的回调函数onFulfilled和操作失败的回调函数onRejected
  • catch(onRejected):相当于.then(null, onRejected),用于捕获并处理Promise链中的错误。
  • finally(callback):无论Promise的状态如何,都会执行这个回调函数。通常用来清理资源。
-- -------------------- ---- -------
---------
    ------------ -- -
        --------------------
        ------ ---------
    --
    ------------ -- -
        ---------------------
    --
    ----------- -- -
        -------------------------------
    ---

Promise链式调用

Promise的一个重要特性是可以进行链式调用。每个then方法返回一个新的Promise对象,这样可以在一个Promise链中连续调用多个异步操作。

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

Promise.all和Promise.race

  • Promise.all(iterable):接收一个Promise数组作为参数,当所有的Promise都变为fulfilled状态时,返回一个新的Promise,其结果是一个包含所有Promise结果的数组;如果任何一个Promise变为rejected状态,则新的Promise立即变为rejected状态。
  • Promise.race(iterable):接收一个Promise数组作为参数,返回一个新的Promise,其结果为数组中第一个完成的Promise的结果。
-- -------------------- ---- -------
----- -------- - ------------------------------
----- -------- - --- ----------------- ------- -- -
    ------------------- ----- --------------
---
----- -------- - --- ----------------- ------- -- -
    ------------------ ---- ----------------
---

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

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

使用Promise实现异步加载图片

下面是一个使用Promise实现图片异步加载的例子:

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

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

Promise的Polyfill实现

由于某些旧浏览器可能不支持原生Promise,我们可以使用polyfill来实现兼容性。

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

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

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

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

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

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

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

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

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

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

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

        --- -------

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

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

通过以上介绍,我们了解了Promise的基础概念、基本使用方法、链式调用、常见的Promise方法,以及如何实现一个简单的Promise polyfill。希望这些内容对你理解和使用Promise有所帮助。

纠错
反馈