Promise 方法实例详解-JavaScript中文网-JavaScript教程资源分享门户

Promise 是现代 JavaScript 中最常用的模式之一。Promise 的出现打破了异步编程固有的“回调地狱”问题，降低了代码的复杂度。在这篇文章中，我们将对 Promise 方法进行详细的学习与分析，并且给出实例代码以及指导意义。

什么是 Promise

Promise 是一个封装异步操作并返回结果的对象，在 ES6 中被正式引入。Promise 接受一个回调函数，其中包含两个参数，一个是成功回调，另一个是失败回调。在异步操作完成之后，Promise 会根据操作结果来调用对应的回调函数。

Promise 的状态

Promise 一共有三种状态：Pending（等待中）、Fulfilled（已完成）、Rejected（已拒绝）。Promise 刚被创建时处于 Pending 状态，等待异步操作完成后转化为 Fulfilled 或者 Rejected 状态。

Promise 常用 API

Promise.resolve()

Promise.resolve() 用于创建一个以传入值解析为成功状态的 Promise 对象。比如：

var p1 = Promise.resolve(1);
p1.then(function(value) {
    console.log(value); // 输出：1
});

Promise.reject()

Promise.reject() 用于创建一个以传入值拒绝为失败状态的 Promise 对象，比如：

var p2 = Promise.reject(new Error("Something went wrong"));
p2.catch(function(error) {
    console.error(error); // 输出：Error: Something went wrong
});

Promise.then()

Promise.then() 方法用于在 Promise 成功时调用的回调函数。

var p3 = Promise.resolve(1);
p3.then(function(value) {
    console.log(value); // 输出：1
});

Promise.catch()

Promise.catch() 方法用于在 Promise 失败时调用的回调函数。

var p4 = Promise.reject(new Error("Something went wrong"));
p4.catch(function(error) {
    console.error(error); // 输出：Error: Something went wrong
});

Promise.all()

Promise.all() 方法允许我们同时传入一组 Promise，只有当所有 Promise 都被解析状态时，才会返回一个成功状态的 Promise 对象。

var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function(values) {
    console.log(values); // 输出：[1,2,3]
});

Promise 实例代码

Promise 实现图片预加载

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

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

------------------------------------------------ -
    ---------------- ------ --- ---------
------------------- -
    ----------------- ----- --- ----- -- ------ -- -------
---展开代码

Promise 实现简易版 Ajax

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

---------------------------------------------------------------------------- -
    ---------------------- - - ----------
------------------------ -
    --------------------- - - -------
--展开代码

Promise 的指导意义

Promise 的出现给予了我们一种更加优美的异步编程的方式，同时降低了代码的复杂性与维护难度。但是我们在实际开发中，应该根据不同的场景进行选用不同的异步模型，不是所有的异步操作都需要使用 Promise。希望本篇文章对于大家学习 Promise 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ca8ccee46428fe9e2d1949

Promise 方法实例详解