ES6系列之我們來聊聊Promise

冴羽發表於2018-10-18

Promise

前言

Promise 的基本使用可以看阮一峰老師的《ECMAScript 6 入門》。

我們來聊點其他的。

回撥

說起 Promise，我們一般都會從回撥或者回撥地獄說起，那麼使用回撥到底會導致哪些不好的地方呢？

1. 回撥巢狀

使用回撥，我們很有可能會將業務程式碼寫成如下這種形式：

doA( function(){
    doB();

    doC( function(){
        doD();
    } )

    doE();
} );

doF();

當然這是一種簡化的形式，經過一番簡單的思考，我們可以判斷出執行的順序為：

doA()
doF()
doB()
doC()
doE()
doD()

然而在實際的專案中，程式碼會更加雜亂，為了排查問題，我們需要繞過很多礙眼的內容，不斷的在函式間進行跳轉，使得排查問題的難度也在成倍增加。

當然之所以導致這個問題，其實是因為這種巢狀的書寫方式跟人線性的思考方式相違和，以至於我們要多花一些精力去思考真正的執行順序，巢狀和縮排只是這個思考過程中轉移注意力的細枝末節而已。

當然了，與人線性的思考方式相違和，還不是最糟糕的，實際上，我們還會在程式碼中加入各種各樣的邏輯判斷，就比如在上面這個例子中，doD() 必須在 doC() 完成後才能完成，萬一 doC() 執行失敗了呢？我們是要重試 doC() 嗎？還是直接轉到其他錯誤處理函式中？當我們將這些判斷都加入到這個流程中，很快程式碼就會變得非常複雜，以至於無法維護和更新。

2. 控制反轉

正常書寫程式碼的時候，我們理所當然可以控制自己的程式碼，然而當我們使用回撥的時候，這個回撥函式是否能接著執行，其實取決於使用回撥的那個 API，就比如：

// 回撥函式是否被執行取決於 buy 模組
import {buy} from `./buy.js`;

buy(itemData, function(res) {
    console.log(res)
});

對於我們經常會使用的 fetch 這種 API，一般是沒有什麼問題的，但是如果我們使用的是第三方的 API 呢？

當你呼叫了第三方的 API，對方是否會因為某個錯誤導致你傳入的回撥函式執行了多次呢？

為了避免出現這樣的問題，你可以在自己的回撥函式中加入判斷，可是萬一又因為某個錯誤這個回撥函式沒有執行呢？
萬一這個回撥函式有時同步執行有時非同步執行呢？

我們總結一下這些情況：

回撥函式執行多次
回撥函式沒有執行
回撥函式有時同步執行有時非同步執行

對於這些情況，你可能都要在回撥函式中做些處理，並且每次執行回撥函式的時候都要做些處理，這就帶來了很多重複的程式碼。

回撥地獄

我們先看一個簡單的回撥地獄的示例。

現在要找出一個目錄中最大的檔案，處理步驟應該是：

用 fs.readdir 獲取目錄中的檔案列表；
迴圈遍歷檔案，使用 fs.stat 獲取檔案資訊
比較找出最大檔案；
以最大檔案的檔名為引數呼叫回撥。

程式碼為：

var fs = require(`fs`);
var path = require(`path`);

function findLargest(dir, cb) {
    // 讀取目錄下的所有檔案
    fs.readdir(dir, function(er, files) {
        if (er) return cb(er);

        var counter = files.length;
        var errored = false;
        var stats = [];

        files.forEach(function(file, index) {
            // 讀取檔案資訊
            fs.stat(path.join(dir, file), function(er, stat) {

                if (errored) return;

                if (er) {
                    errored = true;
                    return cb(er);
                }

                stats[index] = stat;

                // 事先算好有多少個檔案，讀完 1 個檔案資訊，計數減 1，當為 0 時，說明讀取完畢，此時執行最終的比較操作
                if (--counter == 0) {

                    var largest = stats
                        .filter(function(stat) { return stat.isFile() })
                        .reduce(function(prev, next) {
                            if (prev.size > next.size) return prev
                            return next
                        })

                    cb(null, files[stats.indexOf(largest)])
                }
            })
        })
    })
}

使用方式為：

// 查詢當前目錄最大的檔案
findLargest(`./`, function(er, filename) {
    if (er) return console.error(er)
    console.log(`largest file was:`, filename)
});

你可以將以上程式碼複製到一個比如 index.js 檔案，然後執行 node index.js 就可以列印出最大的檔案的名稱。

看完這個例子，我們再來聊聊回撥地獄的其他問題：

1.難以複用

回撥的順序確定下來之後，想對其中的某些環節進行復用也很困難，牽一髮而動全身。

舉個例子，如果你想對 fs.stat 讀取檔案資訊這段程式碼複用，因為回撥中引用了外層的變數，提取出來後還需要對外層的程式碼進行修改。

2.堆疊資訊被斷開

我們知道，JavaScript 引擎維護了一個執行上下文棧，當函式執行的時候，會建立該函式的執行上下文壓入棧中，當函式執行完畢後，會將該執行上下文出棧。

如果 A 函式中呼叫了 B 函式，JavaScript 會先將 A 函式的執行上下文壓入棧中，再將 B 函式的執行上下文壓入棧中，當 B 函式執行完畢，將 B 函式執行上下文出棧，當 A 函式執行完畢後，將 A 函式執行上下文出棧。

這樣的好處在於，我們如果中斷程式碼執行，可以檢索完整的堆疊資訊，從中獲取任何我們想獲取的資訊。

可是非同步回撥函式並非如此，比如執行 fs.readdir 的時候，其實是將回撥函式加入任務佇列中，程式碼繼續執行，直至主執行緒完成後，才會從任務佇列中選擇已經完成的任務，並將其加入棧中，此時棧中只有這一個執行上下文，如果回撥報錯，也無法獲取呼叫該非同步操作時的棧中的資訊，不容易判定哪裡出現了錯誤。

此外，因為是非同步的緣故，使用 try catch 語句也無法直接捕獲錯誤。

(不過 Promise 並沒有解決這個問題)

3.藉助外層變數

當多個非同步計算同時進行，比如這裡遍歷讀取檔案資訊，由於無法預期完成順序，必須藉助外層作用域的變數，比如這裡的 count、errored、stats 等，不僅寫起來麻煩，而且如果你忽略了檔案讀取錯誤時的情況，不記錄錯誤狀態，就會接著讀取其他檔案，造成無謂的浪費。此外外層的變數，也可能被其它同一作用域的函式訪問並且修改，容易造成誤操作。

之所以單獨講講回撥地獄，其實是想說巢狀和縮排只是回撥地獄的一個梗而已，它導致的問題遠非巢狀導致的可讀性降低而已。

Promise

Promise 使得以上絕大部分的問題都得到了解決。

1. 巢狀問題

舉個例子：

request(url, function(err, res, body) {
    if (err) handleError(err);
    fs.writeFile(`1.txt`, body, function(err) {
        request(url2, function(err, res, body) {
            if (err) handleError(err)
        })
    })
});

使用 Promise 後：

request(url)
.then(function(result) {
    return writeFileAsynv(`1.txt`, result)
})
.then(function(result) {
    return request(url2)
})
.catch(function(e){
    handleError(e)
});

而對於讀取最大檔案的那個例子，我們使用 promise 可以簡化為：

var fs = require(`fs`);
var path = require(`path`);

var readDir = function(dir) {
    return new Promise(function(resolve, reject) {
        fs.readdir(dir, function(err, files) {
            if (err) reject(err);
            resolve(files)
        })
    })
}

var stat = function(path) {
    return new Promise(function(resolve, reject) {
        fs.stat(path, function(err, stat) {
            if (err) reject(err)
            resolve(stat)
        })
    })
}

function findLargest(dir) {
    return readDir(dir)
        .then(function(files) {
            let promises = files.map(file => stat(path.join(dir, file)))
            return Promise.all(promises).then(function(stats) {
                return { stats, files }
            })
        })
        .then(data => {

            let largest = data.stats
                .filter(function(stat) { return stat.isFile() })
                .reduce((prev, next) => {
                    if (prev.size > next.size) return prev
                    return next
                })

            return data.files[data.stats.indexOf(largest)]
        })

}

2. 控制反轉再反轉

前面我們講到使用第三方回撥 API 的時候，可能會遇到如下問題：

回撥函式執行多次
回撥函式沒有執行
回撥函式有時同步執行有時非同步執行

對於第一個問題，Promise 只能 resolve 一次，剩下的呼叫都會被忽略。

對於第二個問題，我們可以使用 Promise.race 函式來解決：

function timeoutPromise(delay) {
    return new Promise( function(resolve,reject){
        setTimeout( function(){
            reject( "Timeout!" );
        }, delay );
    } );
}

Promise.race( [
    foo(),
    timeoutPromise( 3000 )
] )
.then(function(){}, function(err){});

對於第三個問題，為什麼有的時候會同步執行有的時候回非同步執行呢？

我們來看個例子：

var cache = {...};
function downloadFile(url) {
      if(cache.has(url)) {
            // 如果存在cache，這裡為同步呼叫
           return Promise.resolve(cache.get(url));
      }
     return fetch(url).then(file => cache.set(url, file)); // 這裡為非同步呼叫
}
console.log(`1`);
getValue.then(() => console.log(`2`));
console.log(`3`);

在這個例子中，有 cahce 的情況下，列印結果為 1 2 3，在沒有 cache 的時候，列印結果為 1 3 2。

然而如果將這種同步和非同步混用的程式碼作為內部實現，只暴露介面給外部呼叫，呼叫方由於無法判斷是到底是非同步還是同步狀態，影響程式的可維護性和可測試性。

簡單來說就是同步和非同步共存的情況無法保證程式邏輯的一致性。

然而 Promise 解決了這個問題，我們來看個例子：

var promise = new Promise(function (resolve){
    resolve();
    console.log(1);
});
promise.then(function(){
    console.log(2);
});
console.log(3);

// 1 3 2

即使 promise 物件立刻進入 resolved 狀態，即同步呼叫 resolve 函式，then 函式中指定的方法依然是非同步進行的。

PromiseA+ 規範也有明確的規定：

實踐中要確保 onFulfilled 和 onRejected 方法非同步執行，且應該在 then 方法被呼叫的那一輪事件迴圈之後的新執行棧中執行。

Promise 反模式

1.Promise 巢狀

// bad
loadSomething().then(function(something) {
    loadAnotherthing().then(function(another) {
        DoSomethingOnThem(something, another);
    });
});

// good
Promise.all([loadSomething(), loadAnotherthing()])
.then(function ([something, another]) {
    DoSomethingOnThem(...[something, another]);
});

2.斷開的 Promise 鏈

// bad
function anAsyncCall() {
    var promise = doSomethingAsync();
    promise.then(function() {
        somethingComplicated();
    });

    return promise;
}

// good
function anAsyncCall() {
    var promise = doSomethingAsync();
    return promise.then(function() {
        somethingComplicated()
    });
}

3.混亂的集合

// bad
function workMyCollection(arr) {
    var resultArr = [];
    function _recursive(idx) {
        if (idx >= resultArr.length) return resultArr;

        return doSomethingAsync(arr[idx]).then(function(res) {
            resultArr.push(res);
            return _recursive(idx + 1);
        });
    }

    return _recursive(0);
}

你可以寫成：

function workMyCollection(arr) {
    return Promise.all(arr.map(function(item) {
        return doSomethingAsync(item);
    }));
}

如果你非要以佇列的形式執行，你可以寫成：

function workMyCollection(arr) {
    return arr.reduce(function(promise, item) {
        return promise.then(function(result) {
            return doSomethingAsyncWithResult(item, result);
        });
    }, Promise.resolve());
}

4.catch

// bad
somethingAync.then(function() {
    return somethingElseAsync();
}, function(err) {
    handleMyError(err);
});

如果 somethingElseAsync 丟擲錯誤，是無法被捕獲的。你可以寫成：

// good
somethingAsync
.then(function() {
    return somethingElseAsync()
})
.then(null, function(err) {
    handleMyError(err);
});

// good
somethingAsync()
.then(function() {
    return somethingElseAsync();
})
.catch(function(err) {
    handleMyError(err);
});

紅綠燈問題

題目：紅燈三秒亮一次，綠燈一秒亮一次，黃燈2秒亮一次；如何讓三個燈不斷交替重複亮燈？（用 Promse 實現）

三個亮燈函式已經存在：

function red(){
    console.log(`red`);
}
function green(){
    console.log(`green`);
}
function yellow(){
    console.log(`yellow`);
}

利用 then 和遞迴實現：

function red(){
    console.log(`red`);
}
function green(){
    console.log(`green`);
}
function yellow(){
    console.log(`yellow`);
}

var light = function(timmer, cb){
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            cb();
            resolve();
        }, timmer);
    });
};

var step = function() {
    Promise.resolve().then(function(){
        return light(3000, red);
    }).then(function(){
        return light(2000, green);
    }).then(function(){
        return light(1000, yellow);
    }).then(function(){
        step();
    });
}

step();

promisify

有的時候，我們需要將 callback 語法的 API 改造成 Promise 語法，為此我們需要一個 promisify 的方法。

因為 callback 語法傳參比較明確，最後一個引數傳入回撥函式，回撥函式的第一個引數是一個錯誤資訊，如果沒有錯誤，就是 null，所以我們可以直接寫出一個簡單的 promisify 方法：

function promisify(original) {
    return function (...args) {
        return new Promise((resolve, reject) => {
            args.push(function callback(err, ...values) {
                if (err) {
                    return reject(err);
                }
                return resolve(...values)
            });
            original.call(this, ...args);
        });
    };
}

完整的可以參考 es6-promisif

Promise 的侷限性

1. 錯誤被吃掉

首先我們要理解，什麼是錯誤被吃掉，是指錯誤資訊不被列印嗎？

並不是，舉個例子：

throw new Error(`error`);
console.log(233333);

在這種情況下，因為 throw error 的緣故，程式碼被阻斷執行，並不會列印 233333，再舉個例子：

const promise = new Promise(null);
console.log(233333);

以上程式碼依然會被阻斷執行，這是因為如果通過無效的方式使用 Promise，並且出現了一個錯誤阻礙了正常 Promise 的構造，結果會得到一個立刻跑出的異常，而不是一個被拒絕的 Promise。

然而再舉個例子：

let promise = new Promise(() => {
    throw new Error(`error`)
});
console.log(2333333);

這次會正常的列印 233333，說明 Promise 內部的錯誤不會影響到 Promise 外部的程式碼，而這種情況我們就通常稱為 “吃掉錯誤”。

其實這並不是 Promise 獨有的侷限性，try..catch 也是這樣，同樣會捕獲一個異常並簡單的吃掉錯誤。

而正是因為錯誤被吃掉，Promise 鏈中的錯誤很容易被忽略掉，這也是為什麼會一般推薦在 Promise 鏈的最後新增一個 catch 函式，因為對於一個沒有錯誤處理函式的 Promise 鏈，任何錯誤都會在鏈中被傳播下去，直到你註冊了錯誤處理函式。

2. 單一值

Promise 只能有一個完成值或一個拒絕原因，然而在真實使用的時候，往往需要傳遞多個值，一般做法都是構造一個物件或陣列，然後再傳遞，then 中獲得這個值後，又會進行取值賦值的操作，每次封裝和解封都無疑讓程式碼變得笨重。

說真的，並沒有什麼好的方法，建議是使用 ES6 的解構賦值：

Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(([x, y]) => {
    console.log(x, y);
});

3. 無法取消

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

4. 無法得知 pending 狀態

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

參考

ES6 系列

ES6 系列目錄地址：https://github.com/mqyqingfeng/Blog

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標籤模板、箭頭函式、Symbol、Set、Map 以及 Promise 的模擬實現、模組載入方案、非同步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

ES6 系列之我們來聊聊 Promise
2018-10-16
Promise
我們來聊聊 Vue - compile
2018-02-24
VueCompile
我們們來聊聊併發工具類Semaphore
2018-07-11
我們們來聊聊正向代理和反向代理
2018-05-18
Linux是啥?我們來聊聊？
2022-10-29
Linux
我們來聊聊技術債務
2016-11-21
Spring 系列（四）：我們來聊聊<context:component-scan/>
2019-04-25
SpringContext
聊聊promise系列（基礎）
2019-07-02
Promise
ES6 Promise - 讓我們解開的面紗（遵循Promise/A+規範)
2018-05-28
Promise
讓我們來聊聊前端的工程化
2022-12-14
前端
我們們聊聊艙壁模式
2018-06-27
模式
我們來聊聊Cookie、Session和Storage的那些事
2019-02-16
CookieSession
天天聊爬蟲，今天我們來聊聊反爬
2018-12-19
爬蟲
ES6之promise原理
2019-04-28
Promise
es6 快速入門系列 —— promise
2021-06-25
Promise
實操ES6之Promise
2020-09-08
Promise
當我們談論Promise時，我們說些什麼
2019-03-04
Promise
遮罩層沒有消失 - 我們來說說 async、promise 和 yield 之間的那些事
2022-01-07
遮罩Promise
我們打算聊聊雲平臺的那些事，嘉賓們都來了，你不來嗎？
2018-03-16
來，用ES6寫個Promise吧
2019-02-21
Promise
我們們聊聊如何搭建開發環境？
2018-06-01
開發環境
我們們一起聊聊Java異常
2018-07-06
Java
Nodejs與ES6系列2:Promise物件
2016-06-19
NodeJSPromise物件
watchOS 4釋出，我們來聊聊Apple Watch設計
2017-06-19
APP
泡杯茶，我們坐下聊聊Javascript事件環
2018-09-07
JavaScript事件
面試官！讓我們聊聊正則
2018-08-02
面試
美味的拍照：P40系列到來時，我們該聊聊計算攝影這門“廚藝”
2020-04-10
ES6之Promise常見面試題
2018-07-07
Promise面試題
我們們聊聊對賬系統該如何設計
2018-06-10
ES6 - Promise
2018-12-18
Promise
Promise ES6
2018-02-12
Promise
es6—Promise
2018-03-31
Promise
Apple Ads生效倒數計時，我們來聊聊其工作原理
2021-07-06
APP
加速 Android 新版本的廣泛使用，我們來聊聊 Project Treble
2018-05-17
AndroidProject
今我們們來聊聊JVM 堆外記憶體洩露的BUG是如何查詢的
2018-04-24
JVM記憶體洩露
我也來扔一個Promise吧……
2019-07-26
Promise
ES6——Promise 物件
2019-09-13
Promise物件
ES6 Promise理解
2019-02-27
Promise

ES6系列之我們來聊聊Promise

前言

回撥

1. 回撥巢狀

2. 控制反轉

回撥地獄

Promise

1. 巢狀問題

2. 控制反轉再反轉

Promise 反模式

紅綠燈問題

promisify

Promise 的侷限性

1. 錯誤被吃掉

2. 單一值

3. 無法取消

4. 無法得知 pending 狀態

參考

ES6 系列

相關文章