2. 程式人生 > >ES6 系列之我們來聊聊 Promise

ES6 系列之我們來聊聊 Promise

阿新 • • 發佈：2018-11-12

前言

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

我們來聊點其他的。

回撥

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

1. 回撥巢狀

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

doA( function(){
    doB();

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

    doE();
} );

doF();
複製程式碼

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

doA()
do
 
F()
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，對方是否會因為某個錯誤導致你傳入的回撥函式執行了多次呢？

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

我們總結一下這些情況：

  1. 回撥函式執行多次
  2. 回撥函式沒有執行
  3. 回撥函式有時同步執行有時非同步執行

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

回撥地獄

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

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

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

程式碼為：

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 的時候，可能會遇到如下問題：

  1. 回撥函式執行多次
  2. 回撥函式沒有執行
  3. 回撥函式有時同步執行有時非同步執行

對於第一個問題，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 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

參考

  1. 《你不知道的 JavaScript 中卷》
  2. Promise 的 N 種用法
  3. JavaScript Promise 迷你書
  4. Promises/A+規範
  5. Promise 如何使用
  6. Promise Anti-patterns
  7. 一道關於Promise應用的面試題

ES6 系列

ES6 系列目錄地址：github.com/mqyqingfeng…

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

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

相關推薦

ES6 系列之我們來聊聊 Promise

前言 Promise 的基本使用可以看阮一峰老師的 《ECMAScript 6 入門》。 我們來聊點其他的。 回撥 說起 Promise，我們一般都會從回撥或者回調地獄說起，那麼使用回撥到底會導致哪些不好的地方呢？ 1. 回撥巢狀 使用回撥，我們很有可能會將業務程式碼寫成如下這種形式： doA(

ES6 系列之我們來聊聊裝飾器

Decorator 裝飾器主要用於: 裝飾類 裝飾方法或屬性 裝飾類 @annotation class MyClass { } function annotation(target) { target.annotated = true; } 複製程式碼 裝飾方法或屬性 cla

ES6 系列之我們來聊聊 Async

1. 原生 css 動畫代替 js 動畫 原生 css 動畫要比 js 實現的動畫要高效很多，所以在可能的情況下儘量用原生 css 動畫。 可以參考： You-Dont-Need-JavaScript css animation css @keyframes c

來，我們來聊聊怎麽學好3dMax三維建模這款軟件

dMax三維建模 室內效果圖 效果圖公司近年來的發展體現了流行3D技術，而3D技術的應用也越來越廣泛，3D為電腦效果圖制作的主力。室內效果是設計師進行設計後所達到的效果，除了通常采用的方法外，還應該積極地找尋一種適合的教學方法，培養興趣，以達到最好的效果。

ES6 系列之 Babel 將 Async 編譯成了什麼樣子

前言 本文就是簡單介紹下 Async 語法編譯後的程式碼。 Async const fetchData = (data) => new Promise((resolve) => setTimeout(resolve, 1000, data + 1)) const fetchValue =

ES6 系列之 Babel 是如何編譯 Class 的(上)

前言 在瞭解 Babel 是如何編譯 class 前，我們先看看 ES6 的 class 和 ES5 的建構函式是如何對應的。畢竟，ES6 的 class 可以看作一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。 con

ES6 系列之 Babel 是如何編譯 Class 的(下)

前言 在上一篇 《 ES6 系列 Babel 是如何編譯 Class 的(上)》，我們知道了 Babel 是如何編譯 Class 的，這篇我們學習 Babel 是如何用 ES5 實現 Class 的繼承。 ES5 寄生組合式繼承 function Parent (name) { this.nam

ES6 系列之 defineProperty 與 proxy

前言 我們或多或少都聽過“資料繫結”這個詞，“資料繫結”的關鍵在於監聽資料的變化，可是對於這樣一個物件：var obj = {value: 1}，我們該怎麼知道 obj 發生了改變呢？ definePropety ES5 提供了 Object.defineProperty 方法，該方法可以在一個物件上定

ES6 系列之 Generator 的自動執行

單個非同步任務 var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); c

ES6 系列之私有變數的實現

前言 在閱讀 《ECMAScript 6 入門》的時候，零散的看到有私有變數的實現，所以在此總結一篇。 1. 約定 實現 class Example { constructor() { this._private = 'private'; } getName() { return thi

我們來聊聊面向物件吧(一).....

前言:什麼是面向物件,對於初學者其實就是個噩夢,但是其實面向物件,也不可怕,我個人理解是:變數把具有一定作用的資料存起來,以便後面使用,而函式則是將經常使用的功能封裝起來以便後面使用,而面向物件的思想其實把擁有重複使用的變數和函式組裝起來的一種思想,分隔成一小塊塊的程式碼,以便管理和日後的維護. (一)面向

天天聊爬蟲，今天我們來聊聊反爬

    反爬蟲的幾重措施 1.IP限制 如果是個人編寫的爬蟲，IP可能是固定的，那麼發現某個IP請求過於頻繁並且短時間內訪問大量的頁面，有爬蟲的嫌疑，作為網站的管理或者運維人員，你可能就得想辦法禁止這個IP地址訪問你的網頁了。那麼也就是說這個IP發出的請求在

ES6 系列之異步處理實戰

比較 join yqi let 我們 對象 獲取 作者 rev 前言 我們以查找指定目錄下的最大文件為例，感受從 回調函數 -> Promise -> Generator -> Async 異步處理方式的改變。 API 介紹 為了實現這個功能，我們需要用到

ES6系列之私有變數的實現

前言 在閱讀 《ECMAScript 6 入門》的時候，零散的看到有私有變數的實現，所以在此總結一篇。 1. 約定 實現 class Example { constructor() { this._private = 'private'; } getNam

[轉帖]今天我們來聊聊機框式核心交換機硬體架構演進

今天我們來聊聊機框式核心交換機硬體架構演進 2018-12-17 14:46 出處：其他 作者：佚名    　　【PConline 乾貨鋪】隨著網際網路業務的高速發展，對構建網際

ES6系列之變數宣告let const

ES6也出來好久了,最近閒來無事就想著吧es6做一個系統的總結,鞏固自己的知識,豐富一下部落格. 為什麼叫ES6 　　實際上是ECMA的一個打的標準,這個標準是在2015年6月釋出的,正式的名字實際是es2015,ecma這個組織規定每年6月份對這個版本進行更新,所以有es2016,es2017,es20

ES6系列之箭頭函數

tro 動態 可能 指向 ren dde 綁定 module bsp 本系列是在平時閱讀、學習、實際項目中有關於es6中的新特性、用發的簡單總結，目的是記錄以備日後溫習；本系列預計包含let/const、箭頭函數、解構、常用新增方法、Symbol、Set&Map、P

[js高手之路] es6系列教程 - Map詳解以及常用api

.com size style 系列教程 image clear rsquo images div ECMAScript 6中的Map類型是一種存儲著許多鍵值對的有序列表。鍵值對支持所有的數據類型. 鍵 0 和 ‘0’會被當做兩個不同的鍵，不會發生強

[js高手之路] es6系列教程 - 叠代器,生成器,for...of,entries,values,keys等詳解

== 我會 item 獲取 prot ron 原型對象 檢測 ges 接著上文[js高手之路] es6系列教程 - 叠代器與生成器詳解繼續. 在es6中引入了一個新的循環結構for ....of， 主要是用來循環可叠代的對象，那麽什麽是可叠代的對象呢？ 可叠代的對象一

mysql系列之6--------使用第三方工具-percona來備份mysql和恢復

文件目錄 restart form rpm 導入 完全備份 mys 只需要 schema 使用第三方工具來備份mysql-----percona一、前期準備工作： 1、安裝依賴包：yum -y install perl-Digest-MD5 perl-DBD-