深入理解 JavaScript 異步系列（3）—— ES6 中的 Promise

第一部分，Promise 加入 ES6 標准

原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未經作者允許不得轉載！

從 jquery v1.5 發布經過若干時間之后，Promise 終於出現在了 ES6 的標准中，而當下 ES6 也正在被大規模使用。

本節展示的代碼參考這里

本節內容概述

• 寫一段傳統的異步操作
• 用Promise進行封裝

寫一段傳統的異步操作

還是拿之前講 jquery deferred對象時的那段setTimeout程序

var wait = function () {
    var task = function () {
        console.log('執行完成')
    }
    setTimeout(task, 2000)
}
wait()

之前我們使用 jquery 封裝的，接下來將使用 ES6 的Promise進行封裝，大家注意看有何不同。

用Promise進行封裝

const wait =  function () {
    // 定義一個 promise 對象
    const promise = new Promise((resolve, reject) => {
        // 將之前的異步操作，包括到這個 new Promise 函數之內
        const task = function () {
            console.log('執行完成')
            resolve()  // callback 中去執行 resolve 或者 reject
        }
        setTimeout(task, 2000)
    })
    // 返回 promise 對象
    return promise
}

注意看看程序中的注釋，那都是重點部分。從整體看來，感覺這次比用 jquery 那次簡單一些，邏輯上也更加清晰一些。

• 將之前的異步操作那幾行程序，用new Promise((resolve,reject) => {.....})包裝起來，最后return即可
• 異步操作的內部，在callback中執行resolve()（表明成功了，失敗的話執行reject）

接着上面的程序繼續往下寫。wait()返回的肯定是一個promise對象，而promise對象有then屬性。

const w = wait()
w.then(() => {
    console.log('ok 1')
}, () => {
    console.log('err 1')
}).then(() => {
    console.log('ok 2')
}, () => {
    console.log('err 2')
})

then還是和之前一樣，接收兩個參數（函數），第一個在成功時（觸發resolve）執行，第二個在失敗時(觸發reject)時執行。而且，then還可以進行鏈式操作。

以上就是 ES6 的Promise的基本使用演示。看完你可能會覺得，這跟之前講述 jquery 的不差不多嗎 ———— 對了，這就是我要在之前先講 jquery 的原因，讓你感覺一篇一篇看起來如絲般順滑！

接下來，將詳細說一下 ES6 Promise 的一些比較常見的用法，敬請期待吧！

 

第二部分，Promise 在 ES6 中的具體應用

上一節對 ES6 的 Promise 有了一個最簡單的介紹，這一節詳細說一下 Promise 那些最常見的功能

本節展示的代碼參考這里

本節課程概述

• 准備工作
• 參數傳遞
• 異常捕獲
• 串聯多個異步操作
• Promise.all和Promise.race的應用
• Promise.resolve的應用
• 其他

准備工作

因為以下所有的代碼都會用到Promise，因此干脆在所有介紹之前，先封裝一個Promise，封裝一次，為下面多次應用。

const fs = require('fs')
const path = require('path')  // 后面獲取文件路徑時候會用到
const readFilePromise = function (fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (err, data) => {
            if (err) {
                reject(err)  // 注意，這里執行 reject 是傳遞了參數，后面會有地方接收到這個參數
            } else {
                resolve(data.toString())  // 注意，這里執行 resolve 時傳遞了參數，后面會有地方接收到這個參數
            }
        })
    })
}

以上代碼一個一段 nodejs 代碼，將讀取文件的函數fs.readFile封裝為一個Promise。經過上一節的學習，我想大家肯定都能看明白代碼的含義，要是看不明白，你就需要回爐重造了！

參數傳遞

我們要使用上面封裝的readFilePromise讀取一個 json 文件../data/data2.json，這個文件內容非常簡單：{"a":100, "b":200}

先將文件內容打印出來，代碼如下。大家需要注意，readFilePromise函數中，執行resolve(data.toString())傳遞的參數內容，會被下面代碼中的data參數所接收到。

const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
    console.log(data)
})

再加一個需求，在打印出文件內容之后，我還想看看a屬性的值，代碼如下。之前我們已經知道then可以執行鏈式操作，如果then有多步驟的操作，那么前面步驟return的值會被當做參數傳遞給后面步驟的函數，如下面代碼中的a就接收到了return JSON.parse(data).a的值

const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
    // 第一步操作
    console.log(data)
    return JSON.parse(data).a  // 這里將 a 屬性的值 return
}).then(a => {
    // 第二步操作
    console.log(a)  // 這里可以獲取上一步 return 過來的值
})

總結一下，這一段內容提到的“參數傳遞”其實有兩個方面：

• 執行resolve傳遞的值，會被第一個then處理時接收到
• 如果then有鏈式操作，前面步驟返回的值，會被后面的步驟獲取到

異常捕獲

我們知道then會接收兩個參數（函數），第一個參數會在執行resolve之后觸發（還能傳遞參數），第二個參數會在執行reject之后觸發（其實也可以傳遞參數，和resolve傳遞參數一樣），但是上面的例子中，我們沒有用到then的第二個參數。這是為何呢 ———— 因為不建議這么用。

對於Promise中的異常處理，我們建議用catch方法，而不是then的第二個參數。請看下面的代碼，以及注釋。

const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
    console.log(data)
    return JSON.parse(data).a
}).then(a => {
    console.log(a)
}).catch(err => {
    console.log(err.stack)  // 這里的 catch 就能捕獲 readFilePromise 中觸發的 reject ，而且能接收 reject 傳遞的參數
})

在若干個then串聯之后，我們一般會在最后跟一個.catch來捕獲異常，而且執行reject時傳遞的參數也會在catch中獲取到。這樣做的好處是：

• 讓程序看起來更加簡潔，是一個串聯的關系，沒有分支（如果用then的兩個參數，就會出現分支，影響閱讀）
• 看起來更像是try - catch的樣子，更易理解

串聯多個異步操作

如果現在有一個需求：先讀取data2.json的內容，當成功之后，再去讀取data1.json。這樣的需求，如果用傳統的callback去實現，會變得很麻煩。而且，現在只是兩個文件，如果是十幾個文件這樣做，寫出來的代碼就沒法看了（臭名昭著的callback-hell）。但是用剛剛學到的Promise就可以輕松勝任這項工作

const fullFileName2 = path.resolve(__dirname, '../data/data2.json')
const result2 = readFilePromise(fullFileName2)
const fullFileName1 = path.resolve(__dirname, '../data/data1.json')
const result1 = readFilePromise(fullFileName1)

result2.then(data => {
    console.log('data2.json', data)
    return result1  // 此處只需返回讀取 data1.json 的 Promise 即可
}).then(data => {
    console.log('data1.json', data) // data 即可接收到 data1.json 的內容
})

上文“參數傳遞”提到過，如果then有鏈式操作，前面步驟返回的值，會被后面的步驟獲取到。但是，如果前面步驟返回值是一個Promise的話，情況就不一樣了 ———— 如果前面返回的是Promise對象，后面的then將會被當做這個返回的Promise的第一個then來對待 ———— 如果你這句話看不懂，你需要將“參數傳遞”的示例代碼和這里的示例代碼聯合起來對比着看，然后體會這句話的意思。

Promise.all和Promise.race的應用

我還得繼續提出更加奇葩的需求，以演示Promise的各個常用功能。如下需求：

讀取兩個文件data1.json和data2.json，現在我需要一起讀取這兩個文件，等待它們全部都被讀取完，再做下一步的操作。此時需要用到Promise.all

// Promise.all 接收一個包含多個 promise 對象的數組
Promise.all([result1, result2]).then(datas => {
    // 接收到的 datas 是一個數組，依次包含了多個 promise 返回的內容
    console.log(datas[0])
    console.log(datas[1])
})

讀取兩個文件data1.json和data2.json，現在我需要一起讀取這兩個文件，但是只要有一個已經讀取了，就可以進行下一步的操作。此時需要用到Promise.race

// Promise.race 接收一個包含多個 promise 對象的數組
Promise.race([result1, result2]).then(data => {
    // data 即最先執行完成的 promise 的返回值
    console.log(data)
})

Promise.resolve的應用

從 jquery 引出，到此即將介紹完 ES6 的Promise，現在我們再回歸到 jquery 。

大家都是到 jquery v1.5 之后$.ajax()返回的是一個deferred對象，而這個deferred對象和我們現在正在學習的Promise對象已經很接近了，但是還不一樣。那么 ———— deferred對象能否轉換成 ES6 的Promise對象來使用？？

答案是能！需要使用Promise.resolve來實現這一功能，請看以下代碼：

// 在瀏覽器環境下運行，而非 node 環境
cosnt jsPromise = Promise.resolve($.ajax('/whatever.json'))
jsPromise.then(data => {
    // ...
})

注意：這里的Promise.resolve和文章最初readFilePromise函數內部的resolve函數可千萬不要混了，完全是兩碼事兒。JS 基礎好的同學一看就明白，而這里看不明白的同學，要特別注意。

實際上，並不是Promise.resolve對 jquery 的deferred對象做了特殊處理，而是Promise.resolve能夠將thenable對象轉換為Promise對象。什么是thenable對象？———— 看個例子

// 定義一個 thenable 對象
const thenable = {
    // 所謂 thenable 對象，就是具有 then 屬性，而且屬性值是如下格式函數的對象
    then: (resolve, reject) => {
        resolve(200)
    }
}

// thenable 對象可以轉換為 Promise 對象
const promise = Promise.resolve(thenable)
promise.then(data => {
    // ...
})

上面的代碼就將一個thenalbe對象轉換為一個Promise對象，只不過這里沒有異步操作，所有的都會同步執行，但是不會報錯的。

其實，在我們的日常開發中，這種將thenable轉換為Promise的需求並不多。真正需要的是，將一些異步操作函數（如fs.readFile）轉換為Promise（就像文章一開始readFilePromise做的那樣）。這塊，我們后面會在介紹Q.js庫時，告訴大家一個簡單的方法。

其他

以上都是一些日常開發中非常常用的功能，其他詳細的介紹，請參考阮一峰老師的 ES6 教程 Promise 篇

最后，本節我們只是介紹了Promise的一些應用，通俗易懂拿來就用的東西，但是沒有提升到理論和標准的高度。有人可能會不屑 ———— 我會用就行了，要那么空談的理論干嘛？———— 你只會使用卻上升不到理論高度，永遠都是個搬磚的，搬一塊磚掙一毛錢，不搬就不掙錢！ 在我看來，所有的知識應該都需要上升到理論高度，將實際應用和標准對接，知道真正的出處，才能走的長遠。

下一節我們介紹 Promise/A+ 規范

 

第三部分，對標一下 Promise/A+ 規范

Promise/A 是由 CommonJS 組織制定的異步模式編程規范，后來又經過一些升級，就是當前的 Promise/A+ 規范。上一節講述的Promise的一些功能實現，就是根據這個規范來的。

本節內容概述

• 介紹規范的核心內容
• 狀態變化
• then方法
• 接下來...

介紹規范的核心內容

網上有很多介紹 Promise/A+ 規范的文章，大家可以搜索來看，但是它的核心要點有以下幾個，我也是從看了之后自己總結的

關於狀態

• promise 可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）
• promise 的狀態只可能從“等待”轉到“完成”態或者“拒絕”態，不能逆向轉換，同時“完成”態和“拒絕”態不能相互轉換

關於then方法

• promise 必須實現then方法，而且then必須返回一個 promise ，同一個 promise 的then可以調用多次（鏈式），並且回調的執行順序跟它們被定義時的順序一致
• then方法接受兩個參數，第一個參數是成功時的回調，在 promise 由“等待”態轉換到“完成”態時調用，另一個是失敗時的回調，在 promise 由“等待”態轉換到“拒絕”態時調用

下面挨個介紹這些規范在上一節代碼中的實現，所謂理論與實踐相結合。在閱讀以下內容時，你要時刻准備參考上一節的代碼。

狀態變化

promise 可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）

拿到上一節的readFilePromise函數，然后執行const result = readFilePromise(someFileName)會得到一個Promise對象。

• 剛剛創建時，就是 等待（pending）狀態
• 如果讀取文件成功了，readFilePromise函數內部的callback中會自定調用resolve()，這樣就變為 已完成（fulfilled）狀態
• 如果很不幸讀取文件失敗了（例如文件名寫錯了，找不到文件），readFilePromise函數內部的callback中會自定調用reject()，這樣就變為 已拒絕（rejeced）狀態

promise 的狀態只可能從“等待”轉到“完成”態或者“拒絕”態，不能逆向轉換，同時“完成”態和“拒絕”態不能相互轉換

這個規則還是可以參考讀取文件的這個例子。從一開始准備讀取，到最后無論是讀取成功或是讀取失敗，都是不可逆的。另外，讀取成功和讀取失敗之間，也是不能互換的。這個邏輯沒有任何問題，很好理解。

then方法

promise 必須實現then方法，而且then必須返回一個 promise ，同一個 promise 的then可以調用多次（鏈式），並且回調的執行順序跟它們被定義時的順序一致

• promise對象必須實現then方法這個無需解釋，沒有then那就不叫promise
• “而且then必須返回一個promise，同一個 promise 的then可以調用多次（鏈式）” ———— 這兩句話說明了一個意思 ———— then肯定要再返回一個promise，要不然then后面怎么能再鏈式的跟一個then呢？

then方法接受兩個參數，第一個參數是成功時的回調，在 promise 由“等待”態轉換到“完成”態時調用，另一個是失敗時的回調，在 promise 由“等待”態轉換到“拒絕”態時調用

這句話比較好理解了，我們從一開始就在 demo 中演示。

接下來...

Promise的應用、規范都介紹完了，看起來挺牛的，也解決了異步操作中使用callback帶來的很多問題。但是Promise本質上到底是一種什么樣的存在，它是真的把callback棄而不用了嗎，還是兩者有什么合作關系？它到底是真的神通廣大，還是使用了障眼法？

這些問題，大家學完Promise之后應該去思考，不能光學會怎么用就停止了。下一節我們一起來探討~

 

第四部分，Promise 真的取代 callback 了嗎

Promise 雖然改變了 JS 工程師對於異步操作的寫法，但是卻改變不了 JS 單線程、異步的執行模式。

本節概述

• JS 異步的本質
• Promise 只是表面的寫法上的改變
• Promise 中不能缺少 callback
• 接下來...

JS 異步的本質

從最初的 ES3、4 到 ES5 再到現在的 ES6 和即將到來的 ES7，語法標准上更新很多，但是 JS 這種單線程、異步的本質是沒有改變的。nodejs 中讀取文件的代碼一直都可以這樣寫

fs.readFile('some.json', (err, data) => {
})

既然異步這個本質不能改變，伴隨異步在一起的永遠都會有callback，因為沒有callback就無法實現異步。因此callback永遠存在。

Promise 只是表面的寫法上的改變

JS 工程師不會討厭 JS 異步的本質，但是很討厭 JS 異步操作中callback的書寫方式，特別是遇到萬惡的callback-hell（嵌套callback）時。

計算機的抽象思維和人的具象思維是完全不一樣的，人永遠喜歡看起來更加符合邏輯、更加易於閱讀的程序，因此現在特別強調代碼可讀性。而Promise就是一種代碼可讀性的變化。大家感受一下這兩種不同（這其中還包括異常處理，加上異常處理會更加復雜）

第一種，傳統的callback方式

fs.readFile('some1.json', (err, data) => {
    fs.readFile('some2.json', (err, data) => {
        fs.readFile('some3.json', (err, data) => {
            fs.readFile('some4.json', (err, data) => {

            })
        })
    })
})

第二種，Promise方式

readFilePromise('some1.json').then(data => {
    return readFilePromise('some2.json')
}).then(data => {
    return readFilePromise('some3.json')
}).then(data => {
    return readFilePromise('some4.json')
})

這兩種方式對於代碼可讀性的對比，非常明顯。但是最后再次強調，Promise只是對於異步操作代碼可讀性的一種變化，它並沒有改變 JS 異步執行的本質，也沒有改變 JS 中存在callback的現象。

Promise 中不能缺少 callback

上文已經基本給出了上一節提問的答案，但是這里還需要再加一個補充：Promise不僅僅是沒有取代callback或者棄而不用，反而Promise中要使用到callback。因為，JS 異步執行的本質，必須有callback存在，否則無法實現。

再次粘貼處之前章節的封裝好的一個Promise函數（進行了一點點簡化）

const readFilePromise = function (fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (err, data) => {
            resolve(data.toString())
        })
    })
}

上面的代碼中，promise對象的狀態要從pending變化為fulfilled，就需要去執行resolve()函數。那么是從哪里執行的 ———— 還得從callback中執行resolve函數 ———— 這就是Promise也需要callback的最直接體現。

接下來...

一塊技術“火”的程度和第三方開源軟件的數量、質量以及使用情況有很大的正比關系。例如為了簡化 DOM 操作，jquery 風靡全世界。Promise 用的比較多，第三方庫當然就必不可少，它們極大程度的簡化了 Promise 的代碼。

接下來我們一起看看Q.js這個庫的使用，學會了它，將極大程度提高你寫 Promise 的效率。

 

第五部分，使用 Q.js 庫

如果實際項目中使用Promise，還是強烈建議使用比較靠譜的第三方插件，會極大增加你的開發效率。除了將要介紹的Q.js，還有bluebird也推薦使用，去 github 自行搜索吧。

另外，使用第三方庫不僅僅是提高效率，它還讓你在瀏覽器端（不支持Promise的環境中）使用promise。

本節展示的代碼參考這里

本節內容概述

• 下載和安裝
• 使用Q.nfcall和Q.nfapply
• 使用Q.defer
• 使用Q.denodeify
• 使用Q.all和Q.any
• 使用Q.delay
• 其他

下載和安裝

可以直接去它的 github 地址 （近 1.3W 的 star 數量說明其用戶群很大）查看文檔。

如果項目使用 CommonJS 規范直接 npm i q --save，如果是網頁外鏈可尋找可用的 cdn 地址，或者干脆下載到本地。

以下我將要演示的代碼，都是使用 CommonJS 規范的，因此我要演示代碼之前加上引用，以后的代碼演示就不重復加了。

const Q = require('q')

使用Q.nfcall和Q.nfapply

要使用這兩個函數，你得首先了解 JS 的call和apply，如果不了解，先去看看。熟悉了這兩個函數之后，再回來看。

Q.nfcall就是使用call的語法來返回一個promise對象，例如

const fullFileName = path.resolve(__dirname, '../data/data1.json')
const result = Q.nfcall(fs.readFile, fullFileName, 'utf-8')  // 使用 Q.nfcall 返回一個 promise
result.then(data => {
    console.log(data)
}).catch(err => {
    console.log(err.stack)
})

Q.nfapply就是使用apply的語法返回一個promise對象，例如

const fullFileName = path.resolve(__dirname, '../data/data1.json')
const result = Q.nfapply(fs.readFile, [fullFileName, 'utf-8'])  // 使用 Q.nfapply 返回一個 promise
result.then(data => {
    console.log(data)
}).catch(err => {
    console.log(err.stack)
})

怎么樣，體驗了一把，是不是比直接自己寫Promise簡單多了？

使用Q.defer

Q.defer算是一個比較偏底層一點的 API ，用於自己定義一個promise生成器，如果你需要在瀏覽器端編寫，而且瀏覽器不支持Promise，這個就有用處了。

function readFile(fileName) {
    const defer = Q.defer()
    fs.readFile(fileName, (err, data) => {
        if (err) {
            defer.reject(err)
        } else {
            defer.resolve(data.toString())
        }
    })
    return defer.promise
}
readFile('data1.json')
    .then(data => {
        console.log(data)
    })
    .catch(err => {
        console.log(err.stack)
    })

使用Q.denodeify

我們在很早之前的一節中自己封裝了一個fs.readFile的promise生成器，這里再次回顧一下

const readFilePromise = function (fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data.toString())
            }
        })
    })
}

雖然看着不麻煩，但是還是需要很多行代碼來實現，如果使用Q.denodeify，一行代碼就搞定了！

const readFilePromise = Q.denodeify(fs.readFile)

Q.denodeif就是一鍵將fs.readFile這種有回調函數作為參數的異步操作封裝成一個promise生成器，非常方便！

使用Q.all和Q.any

這兩個其實就是對應了之前講過的Promise.all和Promise.race，而且應用起來一模一樣，不多贅述。

const r1 = Q.nfcall(fs.readFile, 'data1.json', 'utf-8')
const r2 = Q.nfcall(fs.readFile, 'data2.json', 'utf-8')
Q.all([r1, r2]).then(arr => {
    console.log(arr)
}).catch(err => {
    console.log(err)
})

使用Q.delay

Q.delay，顧名思義，就是延遲的意思。例如，讀取一個文件成功之后，再過五秒鍾之后，再去做xxxx。這個如果是自己寫的話，也挺費勁的，但是Q.delay就直接給我們分裝好了。

const result = Q.nfcall(fs.readFile, 'data1.json', 'utf-8')
result.delay(5000).then(data => {
    // 得到結果
    console.log(data.toString())
}).catch(err => {
    // 捕獲錯誤
    console.log(err.stack)
})

其他

以上就是Q.js一些最常用的操作，其他的一些非常用技巧，大家可以去搜索或者去官網查看文檔。

至此，ES6 Promise的所有內容就已經講完了。但是異步操作的優化到這里沒有結束，更加精彩的內容還在后面 ———— Generator

求打賞

如果你看完了，感覺還不錯，歡迎給我打賞 ———— 以激勵我更多輸出優質內容

最后，github地址是 https://github.com/wangfupeng1988/js-async-tutorial 歡迎 star 和 pr

-----------------

學習作者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》