js--promise、async 和 await 相關知識總結

前言

　　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" "表示式" "函式表示式"

寫在最後

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

 

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