摘要：基本用法是一種異步編程的解決方案的回調結果立馬輸出，秒之后輸出如果過程變得復雜，，用回調來處理會使代碼變得復雜代碼復雜影響后期維護，很難一眼看出回調之間的順序問題，代碼難以閱讀的返回一個對象實例，這個實例具有方法，就是執行下一步的功能表示執

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

1.es5的回調

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

2.es6的Promise

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

3.then()的串聯操作

{
    let ajax = function () {
        console.log("run3");
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 2000);
        });
    };
    ajax().then(function () {
        // 返回Promise實例，通過不斷的下一步下一步，實現了串聯操作的結果
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 3000);
        });
    }).then(function () {
        console.log("timeout3");
    });
    // 結果：立馬輸出 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(`出錯了，${num}小于5`);
            }
        });
    };

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

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

例子：所有圖片加載完再統一添加到頁面

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload監聽圖片加載完成
            img.onload = function () {
                resolve(img);
            };
            // onerror監聽圖片加載失敗
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(imgs) {
        console.log(imgs); // [img, img, img] 三個img對象
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        });
    }
    // Promise.all 把多個Promise實例當做一個Promise實例
    // Promise.all(array).then(fn),array對應多個Promise實例，當所有實例狀態發生改變時，新的Promise實例才會跟著發生變化
    // Promise.all也是返回Promise實例，所以也有.then()方法
    // 當三張圖片都加載完成，才會執行showImgs，如果其中有圖片正在加載，不會執行showImgs，頁面上看不到任何一張圖片
    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);
}

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

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload監聽圖片加載完成
            img.onload = function () {
                resolve(img);
            };
            // onerror監聽圖片加載失敗
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(img) {
        let p = document.createElement("p");
        p.appendChild(img);
        document.body.appendChild(p);
    }
    // 當某一張圖片率先加載完成，執行showImgs顯示這張圖片，剩余圖片不再響應
    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);
}