第一部分,Promise 加入 ES6 標(biāo)準(zhǔn)
原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未經(jīng)作者允許不得轉(zhuǎn)載!
從 jquery v1.5 發(fā)布經(jīng)過若干時間之后,Promise 終于出現(xiàn)在了 ES6 的標(biāo)準(zhǔn)中,而當(dāng)下 ES6 也正在被大規(guī)模使用。
本節(jié)展示的代碼參考這里
本節(jié)內(nèi)容概述
寫一段傳統(tǒng)的異步操作
用
Promise
進行封裝
寫一段傳統(tǒng)的異步操作
還是拿之前講 jquery deferred
對象時的那段setTimeout
程序
var wait = function () { var task = function () { console.log('執(zhí)行完成') } setTimeout(task, 2000) } wait()
之前我們使用 jquery 封裝的,接下來將使用 ES6 的Promise
進行封裝,大家注意看有何不同。
用Promise
進行封裝
const wait = function () { // 定義一個 promise 對象 const promise = new Promise((resolve, reject) => { // 將之前的異步操作,包括到這個 new Promise 函數(shù)之內(nèi) const task = function () { console.log('執(zhí)行完成') resolve() // callback 中去執(zhí)行 resolve 或者 reject } setTimeout(task, 2000) }) // 返回 promise 對象 return promise }
注意看看程序中的注釋,那都是重點部分。從整體看來,感覺這次比用 jquery 那次簡單一些,邏輯上也更加清晰一些。
將之前的異步操作那幾行程序,用
new Promise((resolve,reject) => {.....})
包裝起來,最后return
即可異步操作的內(nèi)部,在
callback
中執(zhí)行resolve()
(表明成功了,失敗的話執(zhí)行reject
)
接著上面的程序繼續(xù)往下寫。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
還是和之前一樣,接收兩個參數(shù)(函數(shù)),第一個在成功時(觸發(fā)resolve
)執(zhí)行,第二個在失敗時(觸發(fā)reject
)時執(zhí)行。而且,then
還可以進行鏈?zhǔn)讲僮鳌?/p>
以上就是 ES6 的Promise
的基本使用演示??赐昴憧赡軙X得,這跟之前講述 jquery 的不差不多嗎 ———— 對了,這就是我要在之前先講 jquery 的原因,讓你感覺一篇一篇看起來如絲般順滑!
接下來,將詳細(xì)說一下 ES6 Promise
的一些比較常見的用法,敬請期待吧!
第二部分,Promise 在 ES6 中的具體應(yīng)用
上一節(jié)對 ES6 的 Promise 有了一個最簡單的介紹,這一節(jié)詳細(xì)說一下 Promise 那些最常見的功能
本節(jié)展示的代碼參考這里
本節(jié)課程概述
準(zhǔn)備工作
參數(shù)傳遞
異常捕獲
串聯(lián)多個異步操作
Promise.all
和Promise.race
的應(yīng)用Promise.resolve
的應(yīng)用其他
準(zhǔn)備工作
因為以下所有的代碼都會用到Promise
,因此干脆在所有介紹之前,先封裝一個Promise
,封裝一次,為下面多次應(yīng)用。
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) // 注意,這里執(zhí)行 reject 是傳遞了參數(shù),后面會有地方接收到這個參數(shù) } else { resolve(data.toString()) // 注意,這里執(zhí)行 resolve 時傳遞了參數(shù),后面會有地方接收到這個參數(shù) } }) }) }
以上代碼一個一段 nodejs 代碼,將讀取文件的函數(shù)fs.readFile
封裝為一個Promise
。經(jīng)過上一節(jié)的學(xué)習(xí),我想大家肯定都能看明白代碼的含義,要是看不明白,你就需要回爐重造了!
參數(shù)傳遞
我們要使用上面封裝的readFilePromise
讀取一個 json 文件../data/data2.json
,這個文件內(nèi)容非常簡單:{"a":100, "b":200}
先將文件內(nèi)容打印出來,代碼如下。大家需要注意,readFilePromise
函數(shù)中,執(zhí)行resolve(data.toString())
傳遞的參數(shù)內(nèi)容,會被下面代碼中的data
參數(shù)所接收到。
const fullFileName = path.resolve(__dirname, '../data/data2.json') const result = readFilePromise(fullFileName) result.then(data => { console.log(data) })
再加一個需求,在打印出文件內(nèi)容之后,我還想看看a
屬性的值,代碼如下。之前我們已經(jīng)知道then
可以執(zhí)行鏈?zhǔn)讲僮?,如?code style="margin: 0px; padding: 0px;">then有多步驟的操作,那么前面步驟return
的值會被當(dāng)做參數(shù)傳遞給后面步驟的函數(shù),如下面代碼中的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 過來的值})
總結(jié)一下,這一段內(nèi)容提到的“參數(shù)傳遞”其實有兩個方面:
執(zhí)行
resolve
傳遞的值,會被第一個then
處理時接收到如果
then
有鏈?zhǔn)讲僮?,前面步驟返回的值,會被后面的步驟獲取到
異常捕獲
我們知道then
會接收兩個參數(shù)(函數(shù)),第一個參數(shù)會在執(zhí)行resolve
之后觸發(fā)(還能傳遞參數(shù)),第二個參數(shù)會在執(zhí)行reject
之后觸發(fā)(其實也可以傳遞參數(shù),和resolve
傳遞參數(shù)一樣),但是上面的例子中,我們沒有用到then
的第二個參數(shù)。這是為何呢 ———— 因為不建議這么用。
對于Promise
中的異常處理,我們建議用catch
方法,而不是then
的第二個參數(shù)。請看下面的代碼,以及注釋。
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 中觸發(fā)的 reject ,而且能接收 reject 傳遞的參數(shù)})
在若干個then
串聯(lián)之后,我們一般會在最后跟一個.catch
來捕獲異常,而且執(zhí)行reject
時傳遞的參數(shù)也會在catch
中獲取到。這樣做的好處是:
讓程序看起來更加簡潔,是一個串聯(lián)的關(guān)系,沒有分支(如果用
then
的兩個參數(shù),就會出現(xiàn)分支,影響閱讀)看起來更像是
try - catch
的樣子,更易理解
串聯(lián)多個異步操作
如果現(xiàn)在有一個需求:先讀取data2.json
的內(nèi)容,當(dāng)成功之后,再去讀取data1.json
。這樣的需求,如果用傳統(tǒng)的callback
去實現(xiàn),會變得很麻煩。而且,現(xiàn)在只是兩個文件,如果是十幾個文件這樣做,寫出來的代碼就沒法看了(臭名昭著的callback-hell
)。但是用剛剛學(xué)到的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 的內(nèi)容})
上文“參數(shù)傳遞”提到過,如果then
有鏈?zhǔn)讲僮?,前面步驟返回的值,會被后面的步驟獲取到。但是,如果前面步驟返回值是一個Promise
的話,情況就不一樣了 ———— 如果前面返回的是Promise
對象,后面的then
將會被當(dāng)做這個返回的Promise
的第一個then
來對待 ———— 如果你這句話看不懂,你需要將“參數(shù)傳遞”的示例代碼和這里的示例代碼聯(lián)合起來對比著看,然后體會這句話的意思。
Promise.all
和Promise.race
的應(yīng)用
我還得繼續(xù)提出更加奇葩的需求,以演示Promise
的各個常用功能。如下需求:
讀取兩個文件data1.json
和data2.json
,現(xiàn)在我需要一起讀取這兩個文件,等待它們?nèi)慷急蛔x取完,再做下一步的操作。此時需要用到Promise.all
// Promise.all 接收一個包含多個 promise 對象的數(shù)組Promise.all([result1, result2]).then(datas => { // 接收到的 datas 是一個數(shù)組,依次包含了多個 promise 返回的內(nèi)容 console.log(datas[0]) console.log(datas[1]) })
讀取兩個文件data1.json
和data2.json
,現(xiàn)在我需要一起讀取這兩個文件,但是只要有一個已經(jīng)讀取了,就可以進行下一步的操作。此時需要用到Promise.race
// Promise.race 接收一個包含多個 promise 對象的數(shù)組Promise.race([result1, result2]).then(data => { // data 即最先執(zhí)行完成的 promise 的返回值 console.log(data) })
Promise.resolve
的應(yīng)用
從 jquery 引出,到此即將介紹完 ES6 的Promise
,現(xiàn)在我們再回歸到 jquery 。
大家都是到 jquery v1.5 之后$.ajax()
返回的是一個deferred
對象,而這個deferred
對象和我們現(xiàn)在正在學(xué)習(xí)的Promise
對象已經(jīng)很接近了,但是還不一樣。那么 ———— deferred
對象能否轉(zhuǎn)換成 ES6 的Promise
對象來使用??
答案是能!需要使用Promise.resolve
來實現(xiàn)這一功能,請看以下代碼:
// 在瀏覽器環(huán)境下運行,而非 node 環(huán)境cosnt jsPromise = Promise.resolve($.ajax('/whatever.json')) jsPromise.then(data => { // ...})
注意:這里的Promise.resolve
和文章最初readFilePromise
函數(shù)內(nèi)部的resolve
函數(shù)可千萬不要混了,完全是兩碼事兒。JS 基礎(chǔ)好的同學(xué)一看就明白,而這里看不明白的同學(xué),要特別注意。
實際上,并不是Promise.resolve
對 jquery 的deferred
對象做了特殊處理,而是Promise.resolve
能夠?qū)?code style="margin: 0px; padding: 0px;">thenable對象轉(zhuǎn)換為Promise
對象。什么是thenable
對象?———— 看個例子
// 定義一個 thenable 對象const thenable = { // 所謂 thenable 對象,就是具有 then 屬性,而且屬性值是如下格式函數(shù)的對象 then: (resolve, reject) => { resolve(200) } }// thenable 對象可以轉(zhuǎn)換為 Promise 對象const promise = Promise.resolve(thenable) promise.then(data => { // ...})
上面的代碼就將一個thenalbe
對象轉(zhuǎn)換為一個Promise
對象,只不過這里沒有異步操作,所有的都會同步執(zhí)行,但是不會報錯的。
其實,在我們的日常開發(fā)中,這種將thenable
轉(zhuǎn)換為Promise
的需求并不多。真正需要的是,將一些異步操作函數(shù)(如fs.readFile
)轉(zhuǎn)換為Promise
(就像文章一開始readFilePromise
做的那樣)。這塊,我們后面會在介紹Q.js
庫時,告訴大家一個簡單的方法。
其他
以上都是一些日常開發(fā)中非常常用的功能,其他詳細(xì)的介紹,請參考阮一峰老師的 ES6 教程 Promise 篇
最后,本節(jié)我們只是介紹了Promise
的一些應(yīng)用,通俗易懂拿來就用的東西,但是沒有提升到理論和標(biāo)準(zhǔn)的高度。有人可能會不屑 ———— 我會用就行了,要那么空談的理論干嘛?———— 你只會使用卻上升不到理論高度,永遠(yuǎn)都是個搬磚的,搬一塊磚掙一毛錢,不搬就不掙錢! 在我看來,所有的知識應(yīng)該都需要上升到理論高度,將實際應(yīng)用和標(biāo)準(zhǔn)對接,知道真正的出處,才能走的長遠(yuǎn)。
下一節(jié)我們介紹 Promise/A+ 規(guī)范
第三部分,對標(biāo)一下 Promise/A+ 規(guī)范
Promise/A 是由 CommonJS 組織制定的異步模式編程規(guī)范,后來又經(jīng)過一些升級,就是當(dāng)前的 Promise/A+ 規(guī)范。上一節(jié)講述的Promise
的一些功能實現(xiàn),就是根據(jù)這個規(guī)范來的。
本節(jié)內(nèi)容概述
介紹規(guī)范的核心內(nèi)容
狀態(tài)變化
then
方法接下來...
介紹規(guī)范的核心內(nèi)容
網(wǎng)上有很多介紹 Promise/A+ 規(guī)范的文章,大家可以搜索來看,但是它的核心要點有以下幾個,我也是從看了之后自己總結(jié)的
關(guān)于狀態(tài)
promise 可能有三種狀態(tài):等待(pending)、已完成(fulfilled)、已拒絕(rejected)
promise 的狀態(tài)只可能從“等待”轉(zhuǎn)到“完成”態(tài)或者“拒絕”態(tài),不能逆向轉(zhuǎn)換,同時“完成”態(tài)和“拒絕”態(tài)不能相互轉(zhuǎn)換
關(guān)于then
方法
promise 必須實現(xiàn)
then
方法,而且then
必須返回一個 promise ,同一個 promise 的then
可以調(diào)用多次(鏈?zhǔn)剑?,并且回調(diào)的執(zhí)行順序跟它們被定義時的順序一致then
方法接受兩個參數(shù),第一個參數(shù)是成功時的回調(diào),在 promise 由“等待”態(tài)轉(zhuǎn)換到“完成”態(tài)時調(diào)用,另一個是失敗時的回調(diào),在 promise 由“等待”態(tài)轉(zhuǎn)換到“拒絕”態(tài)時調(diào)用
下面挨個介紹這些規(guī)范在上一節(jié)代碼中的實現(xiàn),所謂理論與實踐相結(jié)合。在閱讀以下內(nèi)容時,你要時刻準(zhǔn)備參考上一節(jié)的代碼。
狀態(tài)變化
promise 可能有三種狀態(tài):等待(pending)、已完成(fulfilled)、已拒絕(rejected)
拿到上一節(jié)的readFilePromise
函數(shù),然后執(zhí)行const result = readFilePromise(someFileName)
會得到一個Promise
對象。
剛剛創(chuàng)建時,就是 等待(pending)狀態(tài)
如果讀取文件成功了,
readFilePromise
函數(shù)內(nèi)部的callback
中會自定調(diào)用resolve()
,這樣就變?yōu)?已完成(fulfilled)狀態(tài)如果很不幸讀取文件失敗了(例如文件名寫錯了,找不到文件),
readFilePromise
函數(shù)內(nèi)部的callback
中會自定調(diào)用reject()
,這樣就變?yōu)?已拒絕(rejeced)狀態(tài)
promise 的狀態(tài)只可能從“等待”轉(zhuǎn)到“完成”態(tài)或者“拒絕”態(tài),不能逆向轉(zhuǎn)換,同時“完成”態(tài)和“拒絕”態(tài)不能相互轉(zhuǎn)換
這個規(guī)則還是可以參考讀取文件的這個例子。從一開始準(zhǔn)備讀取,到最后無論是讀取成功或是讀取失敗,都是不可逆的。另外,讀取成功和讀取失敗之間,也是不能互換的。這個邏輯沒有任何問題,很好理解。
then
方法
promise 必須實現(xiàn)
then
方法,而且then
必須返回一個 promise ,同一個 promise 的then
可以調(diào)用多次(鏈?zhǔn)剑⑶一卣{(diào)的執(zhí)行順序跟它們被定義時的順序一致
promise
對象必須實現(xiàn)then
方法這個無需解釋,沒有then
那就不叫promise
“而且
then
必須返回一個promise
,同一個 promise 的then
可以調(diào)用多次(鏈?zhǔn)剑?———— 這兩句話說明了一個意思 ————then
肯定要再返回一個promise
,要不然then
后面怎么能再鏈?zhǔn)降母粋€then
呢?
then
方法接受兩個參數(shù),第一個參數(shù)是成功時的回調(diào),在 promise 由“等待”態(tài)轉(zhuǎn)換到“完成”態(tài)時調(diào)用,另一個是失敗時的回調(diào),在 promise 由“等待”態(tài)轉(zhuǎn)換到“拒絕”態(tài)時調(diào)用
這句話比較好理解了,我們從一開始就在 demo 中演示。
接下來...
Promise
的應(yīng)用、規(guī)范都介紹完了,看起來挺牛的,也解決了異步操作中使用callback
帶來的很多問題。但是Promise
本質(zhì)上到底是一種什么樣的存在,它是真的把callback
棄而不用了嗎,還是兩者有什么合作關(guān)系?它到底是真的神通廣大,還是使用了障眼法?
這些問題,大家學(xué)完Promise
之后應(yīng)該去思考,不能光學(xué)會怎么用就停止了。下一節(jié)我們一起來探討~
第四部分,Promise 真的取代 callback 了嗎
Promise 雖然改變了 JS 工程師對于異步操作的寫法,但是卻改變不了 JS 單線程、異步的執(zhí)行模式。
本節(jié)概述
JS 異步的本質(zhì)
Promise 只是表面的寫法上的改變
Promise 中不能缺少 callback
接下來...
JS 異步的本質(zhì)
從最初的 ES3、4 到 ES5 再到現(xiàn)在的 ES6 和即將到來的 ES7,語法標(biāo)準(zhǔn)上更新很多,但是 JS 這種單線程、異步的本質(zhì)是沒有改變的。nodejs 中讀取文件的代碼一直都可以這樣寫
fs.readFile('some.json', (err, data) => { })
既然異步這個本質(zhì)不能改變,伴隨異步在一起的永遠(yuǎn)都會有callback
,因為沒有callback
就無法實現(xiàn)異步。因此callback
永遠(yuǎn)存在。
Promise 只是表面的寫法上的改變
JS 工程師不會討厭 JS 異步的本質(zhì),但是很討厭 JS 異步操作中callback
的書寫方式,特別是遇到萬惡的callback-hell
(嵌套callback
)時。
計算機的抽象思維和人的具象思維是完全不一樣的,人永遠(yuǎn)喜歡看起來更加符合邏輯、更加易于閱讀的程序,因此現(xiàn)在特別強調(diào)代碼可讀性。而Promise
就是一種代碼可讀性的變化。大家感受一下這兩種不同(這其中還包括異常處理,加上異常處理會更加復(fù)雜)
第一種,傳統(tǒng)的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') })
這兩種方式對于代碼可讀性的對比,非常明顯。但是最后再次強調(diào),Promise
只是對于異步操作代碼可讀性的一種變化,它并沒有改變 JS 異步執(zhí)行的本質(zhì),也沒有改變 JS 中存在callback
的現(xiàn)象。
Promise 中不能缺少 callback
上文已經(jīng)基本給出了上一節(jié)提問的答案,但是這里還需要再加一個補充:Promise
不僅僅是沒有取代callback
或者棄而不用,反而Promise
中要使用到callback
。因為,JS 異步執(zhí)行的本質(zhì),必須有callback
存在,否則無法實現(xiàn)。
再次粘貼處之前章節(jié)的封裝好的一個Promise
函數(shù)(進行了一點點簡化)
const readFilePromise = function (fileName) { return new Promise((resolve, reject) => { fs.readFile(fileName, (err, data) => { resolve(data.toString()) }) }) }
上面的代碼中,promise
對象的狀態(tài)要從pending
變化為fulfilled
,就需要去執(zhí)行resolve()
函數(shù)。那么是從哪里執(zhí)行的 ———— 還得從callback
中執(zhí)行resolve
函數(shù) ———— 這就是Promise
也需要callback
的最直接體現(xiàn)。
接下來...
一塊技術(shù)“火”的程度和第三方開源軟件的數(shù)量、質(zhì)量以及使用情況
http://www.cnblogs.com/wangfupeng1988/p/6515855.html