寫於 2017.02.26
引言
js的非同步操作,已經是一個老生常談的話題,關於這個話題的文章隨便google一下都可以看到一大堆。那麼為什麼我還要寫這篇東西呢?在最近的工作中,為了編寫一套相對比較複雜的外掛,需要處理各種各樣的非同步操作。但是為了體積和相容性,不打算引入任何的pollyfill,甚至連babel也不允許使用,這也意味著只能以es5的方式去處理。使用回撥的方式對於解耦非常不利,於是找了別的方法去處理這個問題。問題是處理完了,卻也引發了自己的一些思考:處理js的非同步操作,都有一些什麼方法呢?
一、回撥函式
傳說中的“callback hell”就是來自回撥函式。而回撥函式也是最基礎最常用的處理js非同步操作的辦法。我們來看一個簡單的例子:
首先定義三個函式:
function fn1 () {
console.log('Function 1')
}
function fn2 () {
setTimeout(() => {
console.log('Function 2')
}, 500)
}
function fn3 () {
console.log('Function 3')
}
複製程式碼
其中fn2
可以視作一個延遲了500毫秒執行的非同步函式。現在我希望可以依次執行fn1
,fn2
,fn3
。為了保證fn3
在最後執行,我們可以把它作為fn2
的回撥函式:
function fn2 (f) {
setTimeout(() => {
console.log('Function 2')
f()
}, 500)
}
fn2(fn3)
複製程式碼
可以看到,fn2
和fn3
完全耦合在一起,如果有多個類似的函式,很有可能會出現fn1(fn2(fn3(fn4(...))))
這樣的情況。回撥地獄的壞處我就不贅述了,相信各位讀者一定有自己的體會。
二、事件釋出/訂閱
釋出/訂閱模式也是諸多設計模式當中的一種,恰好這種方式可以在es5下相當優雅地處理非同步操作。什麼是釋出/訂閱呢?以上一節的例子來說,fn1
,fn2
,fn3
都可以視作一個事件的釋出者,只要執行它,就會釋出一個事件。這個時候,我們可以通過一個事件的訂閱者去批量訂閱並處理這些事件,包括它們的先後順序。下面我們基於上一章節的例子,增加一個訊息訂閱者的方法(為了簡單起見,程式碼使用了es6的寫法):
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
內呼叫其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
複製程式碼
可以看到,函式的處理順序等於傳入AsyncFunArr
的引數順序。AsyncFunArr
在內部維護一個陣列,每一次呼叫next()
方法都會按順序推出陣列所儲存的一個物件並執行,這也是我在實際的工作中比較常用的方法。
三、Promise
使用Promise的方式,就不需要額外地編寫一個訊息訂閱者函式了,只需要非同步函式返回一個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')
}
複製程式碼
同樣的,我們定義了三個函式,其中fn2
是一個返回Promise的非同步函式,現在我們希望按順序執行它們,只需要按以下方式即可:
fn1()
fn2().then(() => { fn3() })
// output =>
// Function 1
// Function 2
// Function 3
複製程式碼
使用Promise與回撥有兩個最大的不同,第一個是fn2
與fn3
得以解耦;第二是把函式巢狀改為了鏈式呼叫,無論從語義還是寫法上都對開發者更加友好。
四、generator
如果說Promise的使用能夠化回撥為鏈式,那麼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
複製程式碼
在這個例子中,generator函式asyncFunArr()
接受一個待執行函式列表fn
,非同步函式將會通過yield
來執行。在非同步函式內,通過af.next()
啟用generator函式的下一步操作。
這麼粗略的看起來,其實和釋出/訂閱模式非常相似,都是通過在非同步函式內部主動呼叫方法,告訴訂閱者去執行下一步操作。但是這種方式還是不夠優雅,比如說如果有多個非同步函式,那麼這個generator函式肯定得改寫,而且在語義化的程度來說也有一點不太直觀。
五、優雅的async/await
使用最新版本的Node已經可以原生支援async/await
寫法了,通過各種pollyfill也能在舊的瀏覽器使用。那麼為什麼說async/await
方法是最優雅的呢?且看程式碼:
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
複製程式碼
有沒有發現,在定義非同步函式fn2
的時候,其內容和前文使用Promise的時候一模一樣?再看執行函式asyncFunArr()
,其執行的方式和使用generator的時候也非常類似。
非同步的操作都返回Promise,需要順序執行時只需要await相應的函式即可,這種方式在語義化方面非常友好,對於程式碼的維護也很簡單——只需要返回Promise並await它就好,無需像generator那般需要自己去維護內部yield
的執行。
六、尾聲
作為一個歸納和總結,本文內容的諸多知識點也是來自於他人的經驗,不過加入了一些自己的理解和體會。不求科普於他人,但求作為個人的積累。希望讀者可以提出訂正的意見,共同學習進步!