引言

js的異步操作，已經是一個老生常談的話題，關于這個話題的文章隨便google一下都可以看到一大堆。處理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毫秒執(zhí)行的異步函數。現在我希望可以依次執(zhí)行fn1，fn2，fn3。為了保證fn3在最后執(zhí)行，我們可以把它作為fn2的回調函數：

function fn2 (f) {setTimeout(() => {console.log('Function 2')f()}, 500) }fn2(fn3)

可以看到，fn2和fn3完全耦合在一起，如果有多個類似的函數，很有可能會出現fn1(fn2(fn3(fn4(...))))這樣的情況。回調地獄的壞處我就不贅述了，相信各位讀者一定有自己的體會。

二、事件發(fā)布/訂閱

發(fā)布/訂閱模式也是諸多設計模式當中的一種，恰好這種方式可以在es5下相當優(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內調用其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()方法都會按順序推出數組所保存的一個對象并執(zhí)行，這也是我在實際的工作中比較常用的方法。

三、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的異步函數，現在我們希望按順序執(zhí)行它們，只需要按以下方式即可：

fn1() fn2().then(() => { fn3() })// output => // Function 1 // Function 2 // Function 3

使用Promise與回調有兩個最大的不同，第一個是fn2與fn3得以解耦；第二是把函數嵌套改為了鏈式調用，無論從語義還是寫法上都對開發(fā)者更加友好。

四、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()接受一個待執(zhí)行函數列表fn，異步函數將會通過yield來執(zhí)行。在異步函數內，通過af.next()激活generator函數的下一步操作。

這么粗略的看起來，其實和發(fā)布/訂閱模式非常相似，都是通過在異步函數內部主動調用方法，告訴訂閱者去執(zhí)行下一步操作。但是這種方式還是不夠優(yōu)雅，比如說如果有多個異步函數，那么這個generator函數肯定得改寫，而且在語義化的程度來說也有一點不太直觀。

五、優(yōu)雅的async/await

使用最新版本的Node已經可以原生支持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ā)現，在定義異步函數fn2的時候，其內容和前文使用Promise的時候一模一樣？再看執(zhí)行函數asyncFunArr()，其執(zhí)行的方式和使用generator的時候也非常類似。

異步的操作都返回Promise，需要順序執(zhí)行時只需要await相應的函數即可，這種方式在語義化方面非常友好，對于代碼的維護也很簡單——只需要返回Promise并await它就好，無需像generator那般需要自己去維護內部yield的執(zhí)行。

六、尾聲

作為一個歸納和總結，本文內容的諸多知識點也是來自于他人的經驗，不過加入了一些自己的理解和體會。不求科普于他人，但求作為個人的積累。希望讀者可以提出訂正的意見，共同學習進步！

題外話：

《Pi Network 免費挖礦國外熱門項目 一個π幣大約值3元到10元》相信過去BTC的人，信不信未來的PI，了解一下，唯一一個高度與之持平的項目

總結

以上是生活随笔為你收集整理的处理 JavaScript 异步操作的几种方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。