前言

　　promise 是前端開發人員必須掌握的知識點，本文來總結一下相關學習筆記。

正文

　　1、什麼是prommise，promise 解決了什麼問題

　　a、promise 是什麼

　　Promise 是承諾的意思，承諾它過一段時間會給你一個結果。Promise 是一種解決非同步程式設計的方案，相比回撥函式和事件更合理和更強大。從語法上講，promise 是一個物件，從它可以獲取非同步操作的訊息；

　　promise 有三種狀態：pending 初始狀態也叫等待狀態，fulfiled成功狀態，rejected 失敗狀態；狀態一旦改變，就不會再變。創造 promise例項後，它會立即執行。需要注意，promise 的狀態是不可逆的，一旦狀態由 pending 變為 fulfiled 或者reject 狀態，意味著已經產生了結果，同樣，轉為成功狀態會有成功的結果，轉為失敗狀態會返回失敗的原因。

　　promise 作為建構函式，接收兩個引數，分別是成功和失敗的回撥函式。

　　b、promise 解決了什麼問題

　　我們先來看如下程式碼，並不陌生

　　setTimeout(function () {
  　　console.log("開始執行");
　　}, 3000);

　　上面的程式碼，粗略的可以認為在 3 秒後，程式輸出開始執行，但是如果業務比較複雜，我們想在3秒後輸出開始執行，再隔 3 秒列印一次第二次執行呢？接著在隔 3 秒列印第三次執行，程式碼會這樣寫：

　　setTimeout(function () {
 　　 console.log("開始執行");
 　　 setTimeout(
 
function () {
    　　console.log("第二次執行");
   　　 setTimeout(function () {
     　　 console.log("第三次執行");
   　　 }, 3000);
 　　 }, 3000);
　　}, 3000);

　　再看上面的程式碼，如果後面的需求再次優化，需要類似的列印第 4,5,6 次呢？我們的程式碼還是這樣一層層巢狀起來嗎? 這樣多層函式之間互相巢狀，就產生了回撥地獄的問題，這樣寫程式碼有個很大的缺點：（1）程式碼耦合行太強，牽一髮而動全身，可維護性很差，同樣，大量冗餘的程式碼互相巢狀，可讀性很差。因此，為了解決回撥地獄的問題，ES6 提出了 Promise。通過 promise 將上面的程式碼改裝一下將顯的程式碼優雅很多：

    function sleep(second) {
      return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), second * 1000);
      });
    }
    sleep(3)
      .then(() => {
        console.log("開始執行");
        return sleep(3);
      })
      .then(() => {
        console.log("第二次執行");
        return sleep(3);
      })
      .then(() => {
        console.log("第三次執行");
      });

　　2、ES6 中 promise 的使用

　　1）then 鏈式呼叫

　　從表面上看，Promise只是能夠簡化層層回撥的寫法，而實質上，Promise 的精髓是“狀態”，用維護狀態、傳遞狀態的方式來使得回撥函式能夠及時呼叫，它比傳遞 callback 函式要簡單、靈活的多。所以使用 Promise 的正確場景是這樣的：

    p.then((data) => {
      console.log(data);
    })
      .then((data) => {
        console.log(data);
      })
      .then((data) => {
        console.log(data);
      });

　　then 是例項狀態發生改變時的回撥函式，第一個引數是 resolved 狀態的回撥函式，第二個引數是 rejected 狀態的回撥函式，then方法返回的是一個新的Promise例項，也就是promise能鏈式書寫的原因。預設常寫第一個引數即可，reject 狀態的回撥可以通過 catch 來捕獲異常。

　　2）catch 方法用來指定 promise 例項狀態變為 rejected 的捕獲

　　catch 捕獲reject狀態的回撥，相當於 then中的第二個引數，一般寫法如下：

    p.then((data) => {
      console.log("resolved", data);
    }).catch((err) => {
      console.log("rejected", err);
    });

　　也就是說進到catch方法裡面去了，而且把錯誤原因傳到了reason引數中。即便是有錯誤的程式碼也不會報錯了，這與我們的try/catch語句有相同的功能。

　　3）all 方法將多個 promise 例項包裝成一個新的 promise 例項（誰跑的慢，以誰為準執行回撥）

　　Promise.all 方法接收一個數組（可迭代物件）作為引數，並且陣列中的每個元素都是 Promise 例項，最終返回結果也為一個 Promise  物件，例如：

const p = Promise.all([p1, p2, p3])，例項p的狀態由p1、p2、p3決定，分為兩種：

　　只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回撥函式；

　　只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式；

　　常見的寫法如下：

    let Promise1 = new Promise(function (resolve, reject) {});
    let Promise2 = new Promise(function (resolve, reject) {});
    let Promise3 = new Promise(function (resolve, reject) {});
    
    let p = Promise.all([Promise1, Promise2, Promise3]);
    
    p.then(
      (res) => {
        // 三者都成功則成功，成功後處理
      },
      (err) => {
        // 三者只要有失敗的就返回失敗，失敗後處理
      }
    );

　　有了all 方法，我們就可以並行執行多個非同步操作，並且在一個回撥中處理所有的返回資料，比如開發中開啟網頁時，預先載入需要用到的各種資源如圖片、flash 以及各種靜態檔案，所有的都載入完後，我們再進行頁面的初始化。

　　（4）race 方法同樣是將多個 Promise 例項，包裝成一個新的 Promise 例項（誰跑的快，以誰為準執行回撥）

　　const p = Promise.race([p1, p2, p3]);只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變，率先改變的 Promise 例項的返回值則傳遞給p的回撥函式。

　　使用場景：比如，我們在頁面載入的時候，需要請求後端獲取某個圖片的URL，這裡我們可以設定請求的超時時間，當在設定的時間內後端介面沒有返回時，頁面給出請求超時提示。程式碼如下：

　　　　//請求某個圖片資源
        function requestImg() {
            var p = new Promise((resolve, reject) => {
                var img = new Image();
                img.onload = function () {
                    resolve(img);
                }
                img.src = '圖片的路徑';
            });
            return p;
        }
        //延時函式，用於給請求計時
        function timeout() {
            var p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('圖片請求超時');
                }, 5000);
            });
            return p;
        }
        Promise.race([requestImg(), timeout()]).then((data) => {
            console.log(data);
        }).catch((err) => {
            console.log(err);
        });

　　3、promise 的缺點

　　1）無法取消 Promise,一旦新建它就會立即執行，無法中途取消　　

　　2）如果不設定回撥函式，Promise 內部丟擲的錯誤，不會反映到外部

　　3）當處於 pending（等待）狀態時，無法得知目前進展到哪一個階段，是剛剛開始還是即將完成

　　4、手動實現 Promise

        function resolvePromise(promise2, x, resolve, reject) {
            //判斷x是不是promise
            //規範中規定：我們允許別人亂寫，這個程式碼可以實現我們的promise和別人的promise 進行互動
            if (promise2 === x) {//不能自己等待自己完成
                return reject(new TypeError('迴圈引用'));
            };
            // x是除了null以外的物件或者函式
            if (x != null && (typeof x === 'object' || typeof x === 'function')) {
                let called;//防止成功後呼叫失敗
                try {//防止取then是出現異常  object.defineProperty
                    let then = x.then;//取x的then方法 {then:{}}
                    if (typeof then === 'function') {//如果then是函式就認為他是promise
                        //call第一個引數是this，後面的是成功的回撥和失敗的回撥
                        then.call(x, y => {//如果Y是promise就繼續遞迴promise
                            if (called) return;
                            called = true;
                            resolvePromise(promise2, y, resolve, reject)
                        }, r => { //只要失敗了就失敗了
                            if (called) return;
                            called = true;
                            reject(r);
                        });
                    } else {//then是一個普通物件，就直接成功即可
                        resolve(x);
                    }
                } catch (e) {
                    if (called) return;
                    called = true;
                    reject(e)
                }
            } else {//x = 123 x就是一個普通值 作為下個then成功的引數
                resolve(x)
            }

        }

        class Promise {
            constructor(executor) {
                //預設狀態是等待狀態
                this.status = 'panding';
                this.value = undefined;
                this.reason = undefined;
                //存放成功的回撥
                this.onResolvedCallbacks = [];
                //存放失敗的回撥
                this.onRejectedCallbacks = [];
                let resolve = (data) => {//this指的是例項
                    if (this.status === 'pending') {
                        this.value = data;
                        this.status = "resolved";
                        this.onResolvedCallbacks.forEach(fn => fn());
                    }

                }
                let reject = (reason) => {
                    if (this.status === 'pending') {
                        this.reason = reason;
                        this.status = 'rejected';
                        this.onRejectedCallbacks.forEach(fn => fn());
                    }
                }
                try {//執行時可能會發生異常
                    executor(resolve, reject);
                } catch (e) {
                    reject(e);//promise失敗了
                }

            }
            then(onFuiFilled, onRejected) {
                //防止值得穿透 
                onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
                onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; }
                let promise2;//作為下一次then方法的promise
                if (this.status === 'resolved') {
                    promise2 = new Promise((resolve, reject) => {
                        setTimeout(() => {
                            try {
                                //成功的邏輯 失敗的邏輯
                                let x = onFuiFilled(this.value);
                                //看x是不是promise 如果是promise取他的結果 作為promise2成功的的結果
                                //如果返回一個普通值，作為promise2成功的結果
                                //resolvePromise可以解析x和promise2之間的關係
                                //在resolvePromise中傳入四個引數，第一個是返回的promise，第二個是返回的結果，第三個和第四個分別是resolve()和reject()的方法。
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (e) {
                                reject(e);
                            }
                        }, 0)
                    });
                }
                if (this.status === 'rejected') {
                    promise2 = new Promise((resolve, reject) => {
                        setTimeout(() => {
                            try {
                                let x = onRejected(this.reason);
                                //在resolvePromise中傳入四個引數，第一個是返回的promise，第二個是返回的結果，第三個和第四個分別是resolve()和reject()的方法。
                                resolvePromise(promise2, x, resolve, reject)
                            } catch (e) {
                                reject(e);
                            }
                        }, 0)

                    });
                }
                //當前既沒有完成也沒有失敗
                if (this.status === 'pending') {
                    promise2 = new Promise((resolve, reject) => {
                        //把成功的函式一個個存放到成功回撥函式陣列中
                        this.onResolvedCallbacks.push(() => {
                            setTimeout(() => {
                                try {
                                    let x = onFuiFilled(this.value);
                                    resolvePromise(promise2, x, resolve, reject);
                                } catch (e) {
                                    reject(e);
                                }
                            }, 0)
                        });
                        //把失敗的函式一個個存放到失敗回撥函式陣列中
                        this.onRejectedCallbacks.push(() => {
                            setTimeout(() => {
                                try {
                                    let x = onRejected(this.reason);
                                    resolvePromise(promise2, x, resolve, reject)
                                } catch (e) {
                                    reject(e)
                                }
                            }, 0)
                        })
                    })
                }
                return promise2;//呼叫then後返回一個新的promise
            }
            catch(onRejected) {
                // catch 方法就是then方法沒有成功的簡寫
                return this.then(null, onRejected);
            }
        }
        Promise.all = function (promises) {
            //promises是一個promise的陣列
            return new Promise(function (resolve, reject) {
                let arr = []; //arr是最終返回值的結果
                let i = 0; // 表示成功了多少次
                function processData(index, data) {
                    arr[index] = data;
                    if (++i === promises.length) {
                        resolve(arr);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    promises[i].then(function (data) {
                        processData(i, data)
                    }, reject)
                }
            })
        }
        // 只要有一個promise成功了 就算成功。如果第一個失敗了就失敗了
        Promise.race = function (promises) {
            return new Promise((resolve, reject) => {
                for (var i = 0; i < promises.length; i++) {
                    promises[i].then(resolve, reject)
                }
            })
        }
        // 生成一個成功的promise
        Promise.resolve = function (value) {
            return new Promise((resolve, reject) => resolve(value);
        }
        // 生成一個失敗的promise
        Promise.reject = function (reason) {
            return new Promise((resolve, reject) => reject(reason));
        }
        module.exports = Promise;

　　5、async 和 await相關

　　async/await 是 ES7 提出的基於 Promise 的解決非同步的最終方案。

　　async 就是 generation 和 promise 的語法糖，async 就是將 generator的*換成 async，將 yiled 換成 await函式前必須加一個 async，非同步操作方法前加一個 await 關鍵字，意思就是等一下，執行完了再繼續走，注意：await 只能在 async 函式中執行，否則會報錯，Promise 如果返回的是一個錯誤的結果，如果沒有做異常處理，就會報錯，所以用 try..catch 捕獲一下異常就可以了。

　　async

async是一個加在函式前的修飾符，被async定義的函式會預設返回一個Promise物件resolve的值。因此對async函式可以直接then，返回值就是then方法傳入的函式。使用如下：

        async function fun() {
            console.log(1);
            return 1;
        }
        fun().then(val => {
            console.log(val) // 1,1
        })

　　await

　　await 也是一個修飾符，只能放在async定義的函式內。可以理解為等待。await 修飾的如果是Promise物件：可以獲取Promise中返回的內容（resolve或reject的引數），且取到值後語句才會往下執行；如果不是Promise物件：把這個非promise的東西當做await表示式的結果。使用如下：

        async function fun() {
            let a = await new Promise((resolve, reject) => {
                setTimeout(function () {
                    resolve('setTimeout promise')
                }, 3000)
            })
            let b = await "表示式";
            let c = await function () {
                return '函式表示式'
            }()
            console.log(a, b, c)
        }
        fun(); // 3秒後輸出："setTimeout promise" "表示式" "函式表示式"

寫在最後

 　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

誰跑的慢，以誰為準執行回撥