摘要：基本用法是一種異步編程的解決方案的回調(diào)結(jié)果立馬輸出，秒之后輸出如果過(guò)程變得復(fù)雜，，用回調(diào)來(lái)處理會(huì)使代碼變得復(fù)雜代碼復(fù)雜影響后期維護(hù)，很難一眼看出回調(diào)之間的順序問(wèn)題，代碼難以閱讀的返回一個(gè)對(duì)象實(shí)例，這個(gè)實(shí)例具有方法，就是執(zhí)行下一步的功能表示執(zhí)

Promise是一種異步編程的解決方案

1.es5的回調(diào)

{
    let ajax = function (callback) {
        console.log("run1");
        setTimeout(function () {
            callback && callback.call();
        }, 1000);
    };
    ajax(function () {
        console.log("timeout1");
    });
    // 結(jié)果：立馬輸出 run1，1秒之后輸出 timeout1
    // 1.如果過(guò)程變得復(fù)雜，a()=>b()=>c()=>d()... ，用回調(diào)來(lái)處理會(huì)使代碼變得復(fù)雜
    // 2.代碼復(fù)雜影響后期維護(hù)，很難一眼看出回調(diào)之間的順序問(wèn)題，代碼難以閱讀
}

2.es6的Promise

{
    let ajax = function () {
        console.log("run2");
        // 返回一個(gè)對(duì)象（Promise實(shí)例），這個(gè)實(shí)例具有then()方法，就是執(zhí)行下一步的功能
        return new Promise(function (resolve, reject) {
            // resolve表示執(zhí)行下一步操作 reject表示中斷當(dāng)前操作
            setTimeout(function () {
                resolve();
            }, 1000);
        });
    };
    ajax().then(function () {
        // 這個(gè)方法對(duì)應(yīng)resolve
        console.log("timeout2");
    }, function () {
        // 這個(gè)方法對(duì)應(yīng)reject
    });
    // 結(jié)果：立馬輸出 run2，1秒之后輸出 timeout2
    // 結(jié)果和es5一樣，但是代碼可讀性、可維護(hù)性更高
}

3.then()的串聯(lián)操作

{
    let ajax = function () {
        console.log("run3");
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 2000);
        });
    };
    ajax().then(function () {
        // 返回Promise實(shí)例，通過(guò)不斷的下一步下一步，實(shí)現(xiàn)了串聯(lián)操作的結(jié)果
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 3000);
        });
    }).then(function () {
        console.log("timeout3");
    });
    // 結(jié)果：立馬輸出 run3，5秒之后輸出 timeout3
}

4.catch方法

{
    let ajax = function (num) {
        console.log("run4");
        return new Promise(function (resolve, reject) {
            if (num >= 5) {
                resolve();
            } else {
                throw Error(`出錯(cuò)了，${num}小于5`);
            }
        });
    };

    // catch方法用來(lái)捕獲異常
    ajax(6).then(function () {
        console.log(6);
    }).catch(function (err) {
        console.log(err);
    });
    // 結(jié)果：輸出 run4 6

    ajax(3).then(function () {
        console.log(3);
    }).catch(function (err) {
        console.log(err);
    });
    // 結(jié)果：輸出 run4  Error: 出錯(cuò)了，3小于5
}

例子：所有圖片加載完再統(tǒng)一添加到頁(yè)面

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload監(jiān)聽(tīng)圖片加載完成
            img.onload = function () {
                resolve(img);
            };
            // onerror監(jiān)聽(tīng)圖片加載失敗
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(imgs) {
        console.log(imgs); // [img, img, img] 三個(gè)img對(duì)象
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        });
    }
    // Promise.all 把多個(gè)Promise實(shí)例當(dāng)做一個(gè)Promise實(shí)例
    // Promise.all(array).then(fn),array對(duì)應(yīng)多個(gè)Promise實(shí)例，當(dāng)所有實(shí)例狀態(tài)發(fā)生改變時(shí)，新的Promise實(shí)例才會(huì)跟著發(fā)生變化
    // Promise.all也是返回Promise實(shí)例，所以也有.then()方法
    // 當(dāng)三張圖片都加載完成，才會(huì)執(zhí)行showImgs，如果其中有圖片正在加載，不會(huì)執(zhí)行showImgs，頁(yè)面上看不到任何一張圖片
    Promise.all([
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp"),
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp"),
        loadImg("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp")
    ]).then(showImgs);
}

例子：有一個(gè)圖片加載完就添加到頁(yè)面，其余的不管，只顯示最先加載完成的一張圖片

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload監(jiān)聽(tīng)圖片加載完成
            img.onload = function () {
                resolve(img);
            };
            // onerror監(jiān)聽(tīng)圖片加載失敗
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(img) {
        let p = document.createElement("p");
        p.appendChild(img);
        document.body.appendChild(p);
    }
    // 當(dāng)某一張圖片率先加載完成，執(zhí)行showImgs顯示這張圖片，剩余圖片不再響應(yīng)
    Promise.race([
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp"),
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp"),
        loadImg("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp")
    ]).then(showImgs);
}