引言
js的異步操作，已經(jīng)是一個(gè)老生常談的話(huà)題，關(guān)于這個(gè)話(huà)題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫(xiě)這篇東西呢？在最近的工作中，為了編寫(xiě)一套相對(duì)比較復(fù)雜的插件，需要處理各種各樣的異步操作。但是為了體積和兼容性，不打算引入任何的pollyfill，甚至連babel也不允許使用，這也意味著只能以es5的方式去處理。使用回調(diào)的方式對(duì)于解耦非常不利，于是找了別的方法去處理這個(gè)問(wèn)題。問(wèn)題是處理完了，卻也引發(fā)了自己的一些思考：處理js的異步操作，都有一些什么方法呢？
1. 回調(diào)函數(shù)
傳說(shuō)中的“callback hell”就是來(lái)自回調(diào)函數(shù)。而回調(diào)函數(shù)也是最基礎(chǔ)最常用的處理js異步操作的辦法。我們來(lái)看一個(gè)簡(jiǎn)單的例子：
首先定義三個(gè)函數(shù)：
function fn1 () {
console.log('Function 1')
}
function fn2 () {
setTimeout(() => {
console.log('Function 2')
}, 500)
}
function fn3 () {
console.log('Function 3')
}
其中fn2可以視作一個(gè)延遲了500毫秒執(zhí)行的異步函數(shù)?，F(xiàn)在我希望可以依次執(zhí)行fn1，fn2，fn3。為了保證fn3在最后執(zhí)行，我們可以把它作為fn2的回調(diào)函數(shù)：
function fn2 (f) {
setTimeout(() => {
console.log('Function 2')
f()
}, 500)
}
fn2(fn3)
可以看到，fn2和fn3完全耦合在一起，如果有多個(gè)類(lèi)似的函數(shù)，很有可能會(huì)出現(xiàn)fn1(fn2(fn3(fn4(...))))這樣的情況?；卣{(diào)地獄的壞處我就不贅述了，相信各位讀者一定有自己的體會(huì)。
2. 事件發(fā)布/訂閱
發(fā)布/訂閱模式也是諸多設(shè)計(jì)模式當(dāng)中的一種，恰好這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作。什么是發(fā)布/訂閱呢？以上一節(jié)的例子來(lái)說(shuō)，fn1，fn2，fn3都可以視作一個(gè)事件的發(fā)布者，只要執(zhí)行它，就會(huì)發(fā)布一個(gè)事件。這個(gè)時(shí)候，我們可以通過(guò)一個(gè)事件的訂閱者去批量訂閱并處理這些
class AsyncFunArr {
constructor (...arr) {
this.funcArr = [...arr]
}
next () {
const fn = this.funcArr.shift()
if (typeof fn === 'function') fn()
}
run () {
this.next()
}
}
const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)
然后在fn1，fn2，fn3內(nèi)調(diào)用其next()方法：
function fn1 () {
console.log('Function 1')
asyncFunArr.next()
}
function fn2 () {
setTimeout(() => {
console.log('Function 2')
asyncFunArr.next()
}, 500)
}
function fn3 () {
console.log('Function 3')
asyncFunArr.next()
}
// output =>
// Function 1
// Function 2
// Function 3
可以看到，函數(shù)的處理順序等于傳入AsyncFunArr的參數(shù)順序。AsyncFunArr在內(nèi)部維護(hù)一個(gè)數(shù)組，每一次調(diào)用next()方法都會(huì)按順序推出數(shù)組所保存的一個(gè)對(duì)象并執(zhí)行，這也是我在實(shí)際的工作中比較常用的方法
3. Promise
使用Promise的方式，就不需要額外地編寫(xiě)一個(gè)消息訂閱者函數(shù)了，只需要異步函數(shù)返回一個(gè)Promise即可。且看例子：
function fn1 () {
console.log('Function 1')
}
function fn2 () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Function 2')
resolve()
}, 500)
})
}
function fn3 () {
console.log('Function 3')
}
同樣的，我們定義了三個(gè)函數(shù)，其中fn2是一個(gè)返回Promise的異步函數(shù)，現(xiàn)在我們希望按順序執(zhí)行它們，只需要按以下方式即可：
fn1()
fn2().then(() => { fn3() })
// output =>
// Function 1
// Function 2
// Function 3
使用Promise與回調(diào)有兩個(gè)最大的不同，第一個(gè)是fn2與fn3得以解耦；第二是把函數(shù)嵌套改為了鏈?zhǔn)秸{(diào)用，無(wú)論從語(yǔ)義還是寫(xiě)法上都對(duì)開(kāi)發(fā)者更加友好。
4. generator
如果說(shuō)Promise的使用能夠化回調(diào)為鏈?zhǔn)?，那么generator的辦法則可以消滅那一大堆的Promise特征方法，比如一大堆的then()。
function fn1 () {
console.log('Function 1')
}
function fn2 () {
setTimeout(() => {
console.log('Function 2')
af.next()
}, 500)
}
function fn3 () {
console.log('Function 3')
}
function* asyncFunArr (...fn) {
fn[0]()
yield fn[1]()
fn[2]()
}
const af = asyncFunArr(fn1, fn2, fn3)
af.next()
// output =>
// Function 1
// Function 2
// Function 3
在這個(gè)例子中，generator函數(shù)asyncFunArr()接受一個(gè)待執(zhí)行函數(shù)列表fn，異步函數(shù)將會(huì)通過(guò)yield來(lái)執(zhí)行。在異步函數(shù)內(nèi)，通過(guò)af.next()激活generator函數(shù)的下一步操作。
這么粗略的看起來(lái)，其實(shí)和發(fā)布/訂閱模式非常相似，都是通過(guò)在異步函數(shù)內(nèi)部主動(dòng)調(diào)用方法，告訴訂閱者去執(zhí)行下一步操作。但是這種方式還是不夠優(yōu)雅，比如說(shuō)如果有多個(gè)異步函數(shù)，那么這個(gè)generator函數(shù)肯定得改寫(xiě)，而且在語(yǔ)義化的程度來(lái)說(shuō)也有一點(diǎn)不太直觀。
5. 優(yōu)雅的async/await
使用最新版本的Node已經(jīng)可以原生支持async/await寫(xiě)法了，通過(guò)各種pollyfill也能在舊的瀏覽器使用。那么為什么說(shuō)async/await方法是最優(yōu)雅的呢？且看代碼：
function fn1 () {
console.log('Function 1')
}
function fn2 () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Function 2')
resolve()
}, 500)
})
}
function fn3 () {
console.log('Function 3')
}
async function asyncFunArr () {
fn1()
await fn2()
fn3()
}
asyncFunArr()
// output =>
// Function 1
// Function 2
// Function 3
有沒(méi)有發(fā)現(xiàn)，在定義異步函數(shù)fn2的時(shí)候，其內(nèi)容和前文使用Promise的時(shí)候一模一樣？再看執(zhí)行函數(shù)asyncFunArr()，其執(zhí)行的方式和使用generator的時(shí)候也非常類(lèi)似。
異步的操作都返回Promise，需要順序執(zhí)行時(shí)只需要await相應(yīng)的函數(shù)即可，這種方式在語(yǔ)義化方面非常友好，對(duì)于代碼的維護(hù)也很簡(jiǎn)單——只需要返回Promise并await它就好，無(wú)需像generator那般需要自己去維護(hù)內(nèi)部yield的執(zhí)行。
