最近抽空復(fù)習(xí)了一下之前讀過(guò)的JS書甸各，看了一下關(guān)于回調(diào)函數(shù)和promise相關(guān)部分趣倾。
回調(diào)函數(shù)
提到異步編程某饰，盡管發(fā)展到如今黔漂，js中解決異步的方式已經(jīng)出現(xiàn)了很多種，Promise牧嫉、async/await... 但不可否認(rèn)酣藻，在這些出現(xiàn)之前辽剧，我們采用的最常規(guī)的方式就是回調(diào)函數(shù)，可以說(shuō)偷崩，回調(diào)函數(shù)是js中最基礎(chǔ)的異步模式阐斜。但盡管如此诀紊，回調(diào)還是存在著很多不可忽視的缺點(diǎn)渡紫。
- 執(zhí)行順序
思考這樣一段代碼
fs.readFile('file.txt', 'utf-8', functino(data){
console.log('A');
setTimeout(function () {
console.log('B')
}, 0)
console.log('C')
})
console.log('D');
有經(jīng)驗(yàn)的同學(xué)可能稍加推敲就能得出正確結(jié)論惕澎，
D A C B
但不可置否唧喉，這樣一段代碼的執(zhí)行順序是違背我們大腦的正常思維順序的八孝，我們?cè)诖竽X中是不斷上下跳躍著的鸠项。再有，如果把上面的setTimeout換成一個(gè)同步函數(shù)呢楼入？那么結(jié)果就是D A B C嘉熊。再如果它只是會(huì)視情況而定同步或者異步扬舒，也就是我們并不確定它是同步還是異步，這樣的情況下孕惜，我們?nèi)绾谓鉀Q呢诊赊？
解決方法或許只能將每個(gè)步驟硬編碼到前一個(gè)步驟中了。
但是上述只是個(gè)簡(jiǎn)單例子碘箍，現(xiàn)實(shí)中的項(xiàng)目遠(yuǎn)比這個(gè)復(fù)雜鲸郊，嵌套的更深秆撮，狀態(tài)更多，
這種方式使得代碼可復(fù)用性變差盗蟆，維護(hù)成本變高喳资，與我們現(xiàn)在提倡的低耦合相駁腾供。
- 控制反轉(zhuǎn)
// 假如doSomeThing()是一個(gè)第三方api，負(fù)責(zé)做某些事情
// 通過(guò)傳一個(gè)callback來(lái)執(zhí)行接下來(lái)的步驟
doSomeThing('...', function () {
// ...
})
上述例子中节值， callback的執(zhí)行取決于doSomeThing()搞疗，這種現(xiàn)象叫做"控制反轉(zhuǎn)"贴汪，如果doSomeThing中發(fā)生異常休吠，或者說(shuō)doSomeThing是一個(gè)你根本不了解的第三方api，那么你所傳的callback可能出現(xiàn)任何你想不到的情況阳懂，因?yàn)榇藭r(shí)callback的控制權(quán)并不在你手中岩调， 你不能決定它何時(shí)調(diào)用，調(diào)用次數(shù)缰揪，是否傳參等等等等....
引用《你不知道的JavaScript中卷》
回調(diào)最大的問(wèn)題是控制反轉(zhuǎn)钝腺，它會(huì)導(dǎo)致信任鏈的完全斷裂艳狐。
總而言之毫目，我們需要一種比回調(diào)更好的機(jī)制，來(lái)解決執(zhí)行順序镀虐、信任的問(wèn)題刮便。值得欣喜的是近零，JS目前已經(jīng)提供了很多更加強(qiáng)大的異步模式久信，Promise就是其中之一裙士。
Promise
所謂 Promise管毙，就是一個(gè)對(duì)象，用來(lái)傳遞異步操作的消息啃炸。它代表了某個(gè)未來(lái)才會(huì)知道結(jié)果的事件（通常是一個(gè)異步操作）卓舵，并且這個(gè)事件提供統(tǒng)一的 API，可供進(jìn)一步處理肿嘲。
Promise 對(duì)象有以下兩個(gè)特點(diǎn)雳窟。
對(duì)象的狀態(tài)不受外界影響匣屡。Promise 對(duì)象代表一個(gè)異步操作耸采，有三種狀態(tài)：Pending（進(jìn)行中）虾宇、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失斝癖帷）稀轨。只有異步操作的結(jié)果奋刽，可以決定當(dāng)前是哪一種狀態(tài)艰赞，任何其他操作都無(wú)法改變這個(gè)狀態(tài)方妖。這也是 Promise 這個(gè)名字的由來(lái)党觅，它的英語(yǔ)意思就是「承諾」雌澄，表示其他手段無(wú)法改變镐牺。
一旦狀態(tài)改變任柜，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果摔认。Promise 對(duì)象的狀態(tài)改變宅粥，只有兩種可能：從 Pending 變?yōu)?Resolved 和從 Pending 變?yōu)?Rejected秽梅。只要這兩種情況發(fā)生企垦，狀態(tài)就凝固了钞诡，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果接箫。就算改變已經(jīng)發(fā)生了辛友，你再對(duì) Promise 對(duì)象添加回調(diào)函數(shù)废累，也會(huì)立即得到這個(gè)結(jié)果邑滨。這與事件（Event）完全不同驼修，事件的特點(diǎn)是殿遂，如果你錯(cuò)過(guò)了它诈铛，再去監(jiān)聽，是得不到結(jié)果的墨礁。
基本用法
// 我們定義三個(gè)異步行為A幢竹、B、C
function A (cb) {
setTimeout(function () {
console.log('執(zhí)行A')
cb && cb()
})
}
function B (cb) {
setTimeout(function () {
console.log('執(zhí)行B')
cb && cb()
})
}
function C (cb) {
setTimeout(function () {
console.log('執(zhí)行C')
cb && cb()
})
}
假設(shè)這三個(gè)行為是相互依賴關(guān)系執(zhí)行恩静，也就是A執(zhí)行完再執(zhí)行B焕毫，B執(zhí)行完再執(zhí)行C
首先看es5的實(shí)現(xiàn)方式
A(B(C))
在看Promise版本
function A () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('執(zhí)行A')
resolve()
})
})
}
function B () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('執(zhí)行B')
resolve()
})
})
}
function C () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('執(zhí)行C')
resolve()
})
})
}
A().then(B).then(C);
怎么樣蹲坷，是不是覺(jué)得清晰了很多？
回想一下我們?cè)谏厦婊卣{(diào)函數(shù)中遇到的兩個(gè)問(wèn)題 執(zhí)行順序 和 控制反轉(zhuǎn)
- 執(zhí)行順序
我們可以看到 在promise中我們可以很清晰的看出來(lái)邑飒，先執(zhí)行A接下來(lái)是B然后是C,并且我們也不需要關(guān)心A或者B中是同步還是異步操作循签，無(wú)論同步異步都不會(huì)影響到執(zhí)行順序。
這種方式使得我們的代碼一眼就可以看清楚他的執(zhí)行流程县匠，無(wú)論維護(hù)成本還是清晰程度都比回調(diào)函數(shù)要好的多题山，避免了“Callback Hell(回調(diào)地獄)”
- 控制反轉(zhuǎn)
Promise擁有個(gè)then方法，then方法的第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù)客峭，第二個(gè)參數(shù)（可選）是rejected狀態(tài)的回調(diào)函數(shù)备蚓。我們可以根據(jù)promise的狀態(tài)，如果為resolved，就調(diào)用第一個(gè)回調(diào)函數(shù)况凉，如果狀態(tài)變?yōu)閞ejected烤黍，就調(diào)用第二個(gè)回調(diào)函數(shù)娘赴。這樣我們相當(dāng)于把控制權(quán)重新拿回到我們自己手中。
舉個(gè)例子
function A () {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('執(zhí)行A')
resolve('a')
})
})
}
A().then(function(data){
// data就是A返回的proise狀態(tài)成功后所返回的值
console.log(data); // 'a'
}, function(err) {
// 如果A的狀態(tài)變?yōu)閞eject,將會(huì)處罰這個(gè)回調(diào)函數(shù)
})
除了then之外议双，promise還有幾個(gè)方法。
Promise.prototype.catch()；
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的別名，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)
promiseFn.then(function(posts) {
// ...
}).catch(function(error) {
// 處理 promiseFn 和 前一個(gè)回調(diào)函數(shù)運(yùn)行時(shí)發(fā)生的錯(cuò)誤
console.log('發(fā)生錯(cuò)誤！', error);
});
Promise.all()
Promise.all()用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例椅寺。
const p = Promise.all([p1, p2, p3]);
返回的結(jié)果是一個(gè)數(shù)組高镐，里面對(duì)應(yīng)參數(shù)中的幾個(gè)promise實(shí)例的返回值。
只有當(dāng)這幾個(gè)實(shí)例的狀態(tài)都變成成功，或者其中有一個(gè)變?yōu)槭。艜?huì)調(diào)用Promise.all方法后面的回調(diào)函數(shù)。
Promise.race()
Promise.race()方法同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。
const p = Promise.race([p1, p2, p3]);
但是不同于Promise.all的是，只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù)。
