背景
由于最近一段時(shí)間一直在用react-native進(jìn)行APP的開(kāi)發(fā)晋修，所以接觸了不少 javascript。
在我們第一次使用react-native + redux + saga開(kāi)發(fā)的過(guò)程中朱灿，學(xué)習(xí)被饿、見(jiàn)識(shí)到了不少javascript神奇的功能，比如在使用saga的過(guò)程中用到了 yield古涧，并且對(duì)于其使得異步操作同步化十分好奇冰沙，就進(jìn)行了一番探索侨艾。
yield簡(jiǎn)單介紹
先看一段簡(jiǎn)單的代碼
function* gen() {
yield console.log(1)
yield console.log(2)
console.log(3)
}
const g = gen()
g.next()
g.next()
g.next()
輸出如下
1
2
3
函數(shù)gen的聲明使用了function*，使得gen函數(shù)成為一個(gè)generator拓挥，并且可以在其中里面使用yield關(guān)鍵字唠梨，gen()返回一個(gè)generator對(duì)象，通過(guò)next()依次調(diào)用侥啤。
在我的理解看來(lái)当叭，可以將yield關(guān)鍵字理解為函數(shù)的斷點(diǎn)，每次next()就會(huì)從上次的斷點(diǎn)(yield)執(zhí)行到下次的斷點(diǎn)(yield)盖灸，直到函數(shù)結(jié)束退出蚁鳖，于是就產(chǎn)生了上面的結(jié)果。
next() 的返回值
修改一下上面程序的輸出代碼赁炎，用來(lái)查看一下next()函數(shù)的返回值
const g = gen()
console.log(g.next())
console.log(g.next())
console.log(g.next())
輸出：
1
{ value: undefined, done: false }
2
{ value: undefined, done: false }
3
{ value: undefined, done: true }
可以看到醉箕，next()函數(shù)的返回值是一個(gè){value: any, done: boolean}的object，value是運(yùn)行到這個(gè)斷點(diǎn)的返回值徙垫，done表示該函數(shù)是否已經(jīng)執(zhí)行完畢讥裤，對(duì)next()方法返回值的了解，會(huì)有助于我們下面的程序?qū)崿F(xiàn)姻报。
promise 的簡(jiǎn)單了解
promise的出現(xiàn)己英，是為了解決javascript中的異步無(wú)限回調(diào)，一般的使用方法如下：
function delay(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms);
});
}
console.log(1)
delay(300).then(() => console.log(2))
console.log(3)
輸出：
1
3
2
在delay()函數(shù)中使用setTimeout()來(lái)模擬一個(gè)異步操作吴旋，再用promise封裝一下损肛，使得可以使用promise的then()方法來(lái)在異步操作完成之后，執(zhí)行特定的代碼荣瑟。
現(xiàn)在promise的使用已經(jīng)很普遍荧关，javascript標(biāo)準(zhǔn)中的fetch()函數(shù)也是支持promise的回調(diào)機(jī)制，以方便開(kāi)發(fā)者更容易的處理網(wǎng)絡(luò)請(qǐng)求的異步返回褂傀。
異步操作 - 問(wèn)題的產(chǎn)生
在我們的使用過(guò)程中，有類(lèi)似如下結(jié)構(gòu)的代碼：
function* baum() {
yield delay(300).then(() => console.log(1))
yield console.log(2)
yield delay(300).then(() => console.log(3))
yield console.log(4)
}
const b = baum()
b.next()
b.next()
b.next()
b.next()
輸出如下：
2
4
1
3
函數(shù)baum()結(jié)構(gòu)表達(dá)的意思是加勤，有一些同步的操作仙辟，然后會(huì)發(fā)出異步的請(qǐng)求（比如網(wǎng)絡(luò)請(qǐng)求）同波，異步請(qǐng)求結(jié)束后，再執(zhí)行后面的代碼叠国。但是因?yàn)?code>delay()函數(shù)的異步使得1和3的輸出延遲了未檩，并沒(méi)有達(dá)到預(yù)期效果。
可是令人十分費(fèi)解的是粟焊，在saga中冤狡，這樣的程序結(jié)構(gòu)，是會(huì)按照順序執(zhí)行的效果呈現(xiàn)出來(lái)项棠，即輸出是1,2,3,4悲雳，所以一定是saga在對(duì)諸如baum()這樣的generator進(jìn)行了一層包裹，使得里面的同步操作可以等待上一個(gè)異步promise函數(shù)執(zhí)行完成后再被觸發(fā)香追。
異步變同步 - 機(jī)械的實(shí)現(xiàn)
為了可以使得代碼的執(zhí)行順序變成函數(shù)里面的書(shū)寫(xiě)順序合瓢，我們先看一下baum()函數(shù)每次next()的返回值都是什么，對(duì)上一節(jié)的輸出代碼稍作改寫(xiě)：
const b = baum()
console.log(b.next())
輸出：
{ value: Promise { <pending> }, done: false }
1
上面第一行輸出中的value值透典，是delay(300).then(() => console.log(1))這段代碼的執(zhí)行結(jié)果晴楔，那么我們可知，對(duì)于一個(gè)promise峭咒，它的then()函數(shù)的返回值同樣是一個(gè)promise對(duì)象税弃。由此來(lái)說(shuō)，只要將同步的next()執(zhí)行凑队，放到它前面異步的promise中的then()函數(shù)里则果，即可以達(dá)到同步代碼發(fā)生在異步代碼操作之后的效果了。
說(shuō)起來(lái)有點(diǎn)繞顽决，看一下改進(jìn)之后的代碼：
const b = baum()
b.next().value.then(() => {
b.next()
})
輸出：
1
2
果然短条！如之前預(yù)料的一樣的執(zhí)行效果，那么把這段代碼補(bǔ)全才菠，即可以達(dá)到順序輸出1,2,3,4的效果了：
const b = baum()
b.next().value.then(() => { // 第一個(gè) delay 函數(shù)返回的 promise
b.next()
b.next().value.then(() => { // 第二個(gè) delay 函數(shù)返回的 promise
b.next()
})
})
輸出：
1
2
3
4
現(xiàn)在已經(jīng)通過(guò)promise的then()方法茸时，做到了異步、同步代碼執(zhí)行時(shí)的所見(jiàn)即所得赋访，即程序的輸出順序可都，是和書(shū)寫(xiě)順序一致的。
那么最后的任務(wù)蚓耽，就是對(duì)上面的代碼進(jìn)行封裝渠牲，以免去這種手工機(jī)械化的調(diào)用。
異步變同步 - 自動(dòng)化的實(shí)現(xiàn)
經(jīng)過(guò)一番折騰步悠，最后寫(xiě)出了下面一個(gè)函數(shù)himmel()來(lái)使得generator中的調(diào)用签杈，無(wú)論異步的還是同步的yield操作，都是依照著代碼的書(shū)寫(xiě)順序執(zhí)行的：
function himmel(gen) {
const item = gen.next()
if (item.done) {
return item.value
}
const { value, done } = item
if (value instanceof Promise) {
value.then((e) => himmel(gen))
} else {
himmel(gen)
}
}
函數(shù)的實(shí)現(xiàn)是一個(gè)遞歸，接收參數(shù)是一個(gè)generator實(shí)例答姥，退出條件即為當(dāng)yield結(jié)果中的done為true的時(shí)候铣除。后面的代碼會(huì)判斷value是否是一個(gè)promise，如果是的話鹦付，就在then()方法中遞歸尚粘，否則就認(rèn)為是同步代碼，直接遞歸敲长。
測(cè)試一下：
himmel(baum())
輸出：
1
2
3
4
結(jié)果也是正確的郎嫁。
驗(yàn)證以上思路的可行性
在yield出現(xiàn)的時(shí)候，就隨之出現(xiàn)了一個(gè)比較有名的庫(kù)叫作 co 祈噪，這個(gè)庫(kù)的作用就是控制同步與異步代碼的執(zhí)行順序泽铛，在它的說(shuō)明中原文是 generator based flow-control。
看過(guò)co的實(shí)現(xiàn)代碼之后钳降，發(fā)現(xiàn)其本質(zhì)上也是這么實(shí)現(xiàn)的厚宰。只不過(guò)那個(gè)庫(kù)加上了更多的邊界檢測(cè)代碼，做的更加健壯遂填。
至此铲觉，就是我對(duì)于在javascript中使用yield+promise，從而對(duì)同步吓坚、異步代碼進(jìn)行流程控制的思考與總結(jié)撵幽。
