本文和大家分享的主要是javascript異步操作中常見的幾種處理方法,一起來看看吧,希望對大家學(xué)習(xí)javascript有所幫助。
js的異步操作,已經(jīng)是一個老生常談的話題,關(guān)于這個話題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫這篇東西呢?在最近的工作中,為了編寫一套相對比較復(fù)雜的插件,需要處理各種各樣的異步操作。但是為了體積和兼容性,不打算引入任何的pollyfill,甚至連babel也不允許使用,這也意味著只能以es5的方式去處理。使用回調(diào)的方式對于解耦非常不利,于是找了別的方法去處理這個問題。問題是處理完了,卻也引發(fā)了自己的一些思考:處理js的異步操作,都有一些什么方法呢?
一、回調(diào)函數(shù)
傳說中的“callback hell”就是來自回調(diào)函數(shù)。而回調(diào)函數(shù)也是最基礎(chǔ)最常用的處理js異步操作的辦法。我們來看一個簡單的例子:
首先定義三個函數(shù):
function fn1 () {
console.log('Function 1')
}
function fn2 () {
setTimeout(() => {
console.log('Function 2')
}, 500)
}
function fn3 () {
console.log('Function 3')
}
其中 fn2 可以視作一個延遲了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 完全耦合在一起,如果有多個類似的函數(shù),很有可能會出現(xiàn) fn1(fn2(fn3(fn4(...)))) 這樣的情況?;卣{(diào)地獄的壞處我就不贅述了,相信各位讀者一定有自己的體會。
二、事件發(fā)布/訂閱
發(fā)布/訂閱模式也是諸多設(shè)計模式當(dāng)中的一種,恰好這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作。什么是發(fā)布/訂閱呢?以上一節(jié)的例子來說, fn1 , fn2 , fn3 都可以視作一個事件的發(fā)布者,只要執(zhí)行它,就會發(fā)布一個事件。這個時候,我們可以通過一個事件的訂閱者去批量訂閱并處理這些事件,包括它們的先后順序。下面我們基于上一章節(jié)的例子,增加一個消息訂閱者的方法(為了簡單起見,代碼使用了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 內(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)部維護一個數(shù)組,每一次調(diào)用 next() 方法都會按順序推出數(shù)組所保存的一個對象并執(zhí)行,這也是我在實際的工作中比較常用的方法。
三、Promise
使用Promise的方式,就不需要額外地編寫一個消息訂閱者函數(shù)了,只需要異步函數(shù)返回一個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')
}
同樣的,我們定義了三個函數(shù),其中 fn2 是一個返回Promise的異步函數(shù),現(xiàn)在我們希望按順序執(zhí)行它們,只需要按以下方式即可:
fn1()fn2().then(() => { fn3() })
// output =>// Function 1// Function 2// Function 3
使用Promise與回調(diào)有兩個最大的不同,第一個是 fn2 與 fn3 得以解耦;第二是把函數(shù)嵌套改為了鏈式調(diào)用,無論從語義還是寫法上都對開發(fā)者更加友好。
四、generator
如果說Promise的使用能夠化回調(diào)為鏈式,那么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函數(shù) asyncFunArr() 接受一個待執(zhí)行函數(shù)列表 fn ,異步函數(shù)將會通過 yield 來執(zhí)行。在異步函數(shù)內(nèi),通過 af.next() 激活generator函數(shù)的下一步操作。
這么粗略的看起來,其實和發(fā)布/訂閱模式非常相似,都是通過在異步函數(shù)內(nèi)部主動調(diào)用方法,告訴訂閱者去執(zhí)行下一步操作。但是這種方式還是不夠優(yōu)雅,比如說如果有多個異步函數(shù),那么這個generator函數(shù)肯定得改寫,而且在語義化的程度來說也有一點不太直觀。
五、優(yōu)雅的async/await
使用最新版本的Node已經(jīng)可以原生支持 async/await 寫法了,通過各種pollyfill也能在舊的瀏覽器使用。那么為什么說 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
有沒有發(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í)行。
六、尾聲
作為一個歸納和總結(jié),本文內(nèi)容的諸多知識點也是來自于他人的經(jīng)驗,不過加入了一些自己的理解和體會。不求科普于他人,但求作為個人的積累。希望讀者可以提出訂正的意見,共同學(xué)習(xí)進步!