引言
js的異步操作迹恐，已經(jīng)是一個老生常談的話題卧斟，關(guān)于這個話題的文章隨便google一下都可以看到一大堆珍语。那么為什么我還要寫這篇東西呢？在最近的工作中能耻，為了編寫一套相對比較復(fù)雜的插件亡驰，需要處理各種各樣的異步操作。但是為了體積和兼容性戒职，不打算引入任何的pollyfill洪燥，甚至連babel也不允許使用乳乌，這也意味著只能以es5的方式去處理。使用回調(diào)的方式對于解耦非常不利再来，于是找了別的方法去處理這個問題芒篷。問題是處理完了采缚，卻也引發(fā)了自己的一些思考：處理js的異步操作，都有一些什么方法呢篡帕？
1. 回調(diào)函數(shù)
傳說中的“callback hell”就是來自回調(diào)函數(shù)镰烧。而回調(diào)函數(shù)也是最基礎(chǔ)最常用的處理js異步操作的辦法。我們來看一個簡單的例子：
首先定義三個函數(shù)：
functionfn1() {
console.log('Function 1')
}
functionfn2() {
setTimeout(() => {
console.log('Function 2')
}, 500)
}
functionfn3() {
console.log('Function 3')
}
其中fn2可以視作一個延遲了500毫秒執(zhí)行的異步函數(shù)∑友兀現(xiàn)在我希望可以依次執(zhí)行fn1败砂，fn2昌犹，fn3。為了保證fn3在最后執(zhí)行鸿竖，我們可以把它作為fn2的回調(diào)函數(shù)：
functionfn2(f) {
setTimeout(() => {
console.log('Function 2')
f()
}, 500)
}
fn2(fn3)
可以看到缚忧，fn2和fn3完全耦合在一起杈笔，如果有多個類似的函數(shù)，很有可能會出現(xiàn)fn1(fn2(fn3(fn4(...))))這樣的情況球榆〕侄ぃ回調(diào)地獄的壞處我就不贅述了篱昔，相信各位讀者一定有自己的體會旱爆。
順便給大家推薦一個裙，它的前面是 537，中間是631山林，最后就是 707。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)拜鹤，互相幫助流椒。群里每天晚上都有大神免費直播上課宣虾，如果不是想學(xué)習(xí)的小伙伴就不要加啦。
2. 事件發(fā)布/訂閱
發(fā)布/訂閱模式也是諸多設(shè)計模式當(dāng)中的一種蜻势，恰好這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作握玛。什么是發(fā)布/訂閱呢甫菠？以上一節(jié)的例子來說，fn1拂苹，fn2醋寝，fn3都可以視作一個事件的發(fā)布者带迟，只要執(zhí)行它仓犬，就會發(fā)布一個事件。這個時候窘面，我們可以通過一個事件的訂閱者去批量訂閱并處理這些
classAsyncFunArr{
constructor (...arr) {
this.funcArr = [...arr]
}
next() {
const fn = this.funcArr.shift()
if (typeof fn === 'function') fn()
}
run() {
this.next()
}
}
constasyncFunArr=newAsyncFunArr(fn1,fn2,fn3)
然后在fn1财边，fn2点骑，fn3內(nèi)調(diào)用其next()方法：
functionfn1() {
console.log('Function 1')
asyncFunArr.next()
}
functionfn2() {
setTimeout(() => {
console.log('Function 2')
asyncFunArr.next()
}, 500)
}
functionfn3() {
console.log('Function 3')
asyncFunArr.next()
}
//output=>
//Function1
//Function2
//Function3
可以看到，函數(shù)的處理順序等于傳入AsyncFunArr的參數(shù)順序憨募。AsyncFunArr在內(nèi)部維護一個數(shù)組菜谣，每一次調(diào)用next()方法都會按順序推出數(shù)組所保存的一個對象并執(zhí)行尾膊，這也是我在實際的工作中比較常用的方法
3. Promise
使用Promise的方式，就不需要額外地編寫一個消息訂閱者函數(shù)了济舆，只需要異步函數(shù)返回一個Promise即可滋觉。且看例子：
functionfn1() {
console.log('Function 1')
}
functionfn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Function 2')
resolve()
}, 500)
})
}
functionfn3() {
console.log('Function 3')
}
同樣的齐邦，我們定義了三個函數(shù)措拇，其中fn2是一個返回Promise的異步函數(shù)，現(xiàn)在我們希望按順序執(zhí)行它們丐吓，只需要按以下方式即可：
fn1()
fn2().then(() => { fn3() })
//output=>
//Function1
//Function2
//Function3
使用Promise與回調(diào)有兩個最大的不同浅悉，第一個是fn2與fn3得以解耦；第二是把函數(shù)嵌套改為了鏈式調(diào)用券犁，無論從語義還是寫法上都對開發(fā)者更加友好术健。
4. generator
如果說Promise的使用能夠化回調(diào)為鏈式，那么generator的辦法則可以消滅那一大堆的Promise特征方法粘衬，比如一大堆的then()荞估。
functionfn1() {
console.log('Function 1')
}
functionfn2() {
setTimeout(() => {
console.log('Function 2')
af.next()
}, 500)
}
functionfn3() {
console.log('Function 3')
}
function*asyncFunArr(...fn) {
fn[0]()
yield fn[1]()
fn[2]()
}
constaf=asyncFunArr(fn1,fn2,fn3)
af.next()
//output=>
//Function1
//Function2
//Function3
在這個例子中，generator函數(shù)asyncFunArr()接受一個待執(zhí)行函數(shù)列表fn稚新，異步函數(shù)將會通過yield來執(zhí)行勘伺。在異步函數(shù)內(nèi)，通過af.next()激活generator函數(shù)的下一步操作飞醉。
順便給大家推薦一個裙，它的前面是 537屯阀，中間是631冒掌，最后就是 707噪裕。想要學(xué)習(xí)前端的小伙伴可以加入我們一起學(xué)習(xí)蹲盘，互相幫助股毫。群里每天晚上都有大神免費直播上課，如果不是想學(xué)習(xí)的小伙伴就不要加啦召衔。
這么粗略的看起來铃诬，其實和發(fā)布/訂閱模式非常相似，都是通過在異步函數(shù)內(nèi)部主動調(diào)用方法苍凛，告訴訂閱者去執(zhí)行下一步操作趣席。但是這種方式還是不夠優(yōu)雅，比如說如果有多個異步函數(shù)醇蝴，那么這個generator函數(shù)肯定得改寫宣肚，而且在語義化的程度來說也有一點不太直觀。
5. 優(yōu)雅的async/await
使用最新版本的Node已經(jīng)可以原生支持async/await寫法了悠栓，通過各種pollyfill也能在舊的瀏覽器使用霉涨。那么為什么說async/await方法是最優(yōu)雅的呢？且看代碼：
functionfn1() {
console.log('Function 1')
}
functionfn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Function 2')
resolve()
}, 500)
})
}
functionfn3() {
console.log('Function 3')
}
asyncfunctionasyncFunArr() {
fn1()
await fn2()
fn3()
}
asyncFunArr()
//output=>
//Function1
//Function2
//Function3
有沒有發(fā)現(xiàn)惭适，在定義異步函數(shù)fn2的時候笙瑟，其內(nèi)容和前文使用Promise的時候一模一樣？再看執(zhí)行函數(shù)asyncFunArr()癞志，其執(zhí)行的方式和使用generator的時候也非常類似往枷。
異步的操作都返回Promise，需要順序執(zhí)行時只需要await相應(yīng)的函數(shù)即可凄杯，這種方式在語義化方面非常友好错洁，對于代碼的維護也很簡單——只需要返回Promise并await它就好，無需像generator那般需要自己去維護內(nèi)部yield的執(zhí)行戒突。
