JavaScript異步編程__“回調地獄”的一些解決方案

異步編程在JavaScript中非常重要。過多的異步編程也帶了回調嵌套的問題，本文會提供一些解決“回調地獄”的方法。

setTimeout(function () { console.log('延時觸發'); }, 2000); fs.readFile('./sample.txt', 'utf-8', function (err, res) { console.log(res); }); 

上面就是典型的回調函數，不論是在瀏覽器中，還是在node中，JavaScript本身是單線程，因此，為了應對一些單線程帶來的問題，異步編程成為了JavaScript中非常重要的一部分。

不論是瀏覽器中最為常見的ajax、事件監聽，還是node中文件讀取、網絡編程、數據庫等操作，都離不開異步編程。在異步編程中，許多操作都會放在回調函數（callback）中。同步與異步的混雜、過多的回調嵌套都會使得代碼變得難以理解與維護，這也是常受人詬病的地方。

先看下面這段代碼

fs.readFile('./sample.txt', 'utf-8', (err, content) => { let keyword = content.substring(0, 5); db.find(`select * from sample where kw = ${keyword}`, (err, res) => { get(`/sampleget?count=${res.length}`, data => { console.log(data); }); }); }); 

首先我們讀取的一個文件中的關鍵字keyword，然后根據該keyword進行數據庫查詢，最后依據查詢結果請求數據。

其中包含了三個異步操作：

• 文件讀取：fs.readFile
• 數據庫查詢：db.find
• http請求：get

可以看到，我們沒增加一個異步請求，就會多添加一層回調函數的嵌套，這段代碼中三個異步函數的嵌套已經開始使一段本可以語言明確的代碼編程不易閱讀與維護了。

抽象出來這種代碼會變成下面這樣：

asyncFunc1(opt, (...args1) => {
    asyncFunc2(opt, (...args2) => {
        asyncFunc3(opt, (...args3) => {
            asyncFunc4(opt, (...args4) => {
                // some operation }); }); }); }); 

左側明顯出現了一個三角形的縮進區域，過多的回調也就讓我們陷入“回調地獄”。接下來會介紹一些方法來規避回調地獄。

一、拆解function

回調嵌套所帶來的一個重要問題就是代碼不易閱讀與維護。因為普遍來說，過多的縮進（嵌套）會極大的影響代碼的可讀性。基於這一點，可以進行一個最簡單的優化——將各步拆解為單個的function

function getData(count) { get(`/sampleget?count=${count}`, data => { console.log(data); }); } function queryDB(kw) { db.find(`select * from sample where kw = ${kw}`, (err, res) => { getData(res.length); }); } function readFile(filepath) { fs.readFile(filepath, 'utf-8', (err, content) => { let keyword = content.substring(0, 5); queryDB(keyword); }); } readFile('./sample.txt'); 

可以看到，通過上面的改寫方式，代碼清晰了許多。該方法非常簡單，具有一定的效果，但是缺少通用性。

二、事件發布/監聽模式

如果在瀏覽器中寫過事件監聽addEventListener，那么你對這種事件發布/監聽的模式一定不陌生。

借鑒這種思想，一方面，我們可以監聽某一事件，當事件發生時，進行相應回調操作；另一方面，當某些操作完成后，通過發布事件觸發回調。這樣就可以將原本捆綁在一起的代碼解耦。

const events = require('events'); const eventEmitter = new events.EventEmitter(); eventEmitter.on('db', (err, kw) => { db.find(`select * from sample where kw = ${kw}`, (err, res) => { eventEmitter('get', res.length); }); }); eventEmitter.on('get', (err, count) => { get(`/sampleget?count=${count}`, data => { console.log(data); }); }); fs.readFile('./sample.txt', 'utf-8', (err, content) => { let keyword = content.substring(0, 5); eventEmitter. emit('db', keyword); }); 

使用這種模式的實現需要一個事件發布/監聽的庫。上面代碼中使用node原生的events模塊，當然你可以使用任何你喜歡的庫。

三、Promise

Promise是一種異步解決方案，最早由社區提出並實現，后來寫進了es6規范。

目前一些主流的瀏覽器已經原生實現了Promise的API，可以在Can I use里查看瀏覽器的支持情況。當然，如果想要做瀏覽器的兼容，可以考慮使用一些Promise的實現庫，例如bluebird、 Q等。下面以bluebird為例：

首先，我們需要將異步方法改寫為Promise，對於符合node規范的回調函數（第一個參數必須是Error），可以使用bluebird的promisify方法。該方法接收一個標准的異步方法並返回一個Promise對象。

const bluebird = require('bluebird'); const fs = require("fs"); const readFile = bluebird.promisify(fs.readFile); 

這樣，readFile就變成了一個Promise對象。

但是，有的異步方法無法進行轉換，或者我們需要使用原生Promise，這就需要我們手動進行一些改造。下面提供一種改造的方法。

以fs.readFile為例，借助原生Promise來改造該方法：

const readFile = function (filepath) { let resolve, reject; let promise = new Promise((_resolve, _reject) => { resolve = _resolve; reject = _reject; }); let deferred = { resolve, reject, promise }; fs.readFile(filepath, 'utf-8', function (err, ...args) { if (err) { deferred.reject(err); } else { deferred.resolve(...args); } }); return deferred.promise; } 

我們在方法中創建了一個Promise對象，並在異步回調中根據不同的情況使用reject與resolve來改變Promise對象的狀態。該方法返回這個Promise對象。其他的一些異步方法也可以參照這種方式進行改造。

假設通過改造，readFile、queryDB與getData方法均會返回一個Promise對象。代碼就變為了：

readFile('./sample.txt').then(content => { let keyword = content.substring(0, 5); return queryDB(keyword); }).then(res => { return getData(res.length); }).then(data => { console.log(data); }).catch(err => { console.warn(err); }); 

可以看到，之前的嵌套操作編程了通過then連接的鏈式操作。代碼的整潔度上有了一個較大的提高。

4 generator
generator是es6中的一個新的語法。在function關鍵字后添加*即可將函數變為generator。

const gen = function* () { yield 1; yield 2; return 3; } 

執行generator將會返回一個遍歷器對象，用於遍歷generator內部的狀態。

let g = gen(); g.next(); // { value: 1, done: false } g.next(); // { value: 2, done: false } g.next(); // { value: 3, done: true } g.next(); // { value: undefined, done: true } 

可以看到，generator函數有一個最大的特點，可以在內部執行的過程中交出程序的控制權，yield相當於起到了一個暫停的作用；而當一定情況下，外部又將控制權再移交回來。

想象一下，我們用generator來封裝代碼，在異步任務處使用yield關鍵詞，此時generator會將程序執行權交給其他代碼，而在異步任務完成后，調用next方法來恢復yield下方代碼的執行。以readFile為例，大致流程如下：

// 我們的主任務——顯示關鍵字 // 使用yield暫時中斷下方代碼執行 // yield后面為promise對象 const showKeyword = function* (filepath) { console.log('開始讀取'); let keyword = yield readFile(filepath); console.log(`關鍵字為${filepath}`); } // generator的流程控制 let gen = showKeyword(); let res = gen.next(); res.value.then(res => gen.next(res)); 

在主任務部分，原本readFile異步的部分變成了類似同步的寫法，代碼變得非常清晰。而在下半部分，則是對於什么時候需要移交回控制權給generator的流程控制。

然而，我們需要手動控制generator的流程，如果能夠自動執行generator——在需要的時候自動移交控制權，那么會更加具有實用性。

為此，我們可以使用 co 這個庫。它可以是省去我們對於generator流程控制的代碼

const co = reuqire('co'); // 我們的主任務——顯示關鍵字 // 使用yield暫時中斷下方代碼執行 // yield后面為promise對象 const showKeyword = function* (filepath) { console.log('開始讀取'); let keyword = yield readFile(filepath); console.log(`關鍵字為${filepath}`); } // 使用co co(showKeyword); 

其中，yeild關鍵字后面需要是functio, promise, generator, array或object。可以改寫文章一開始的例子：

const co = reuqire('co'); const task = function* (filepath) { let keyword = yield readFile(filepath); let count = yield queryDB(keyword); let data = yield getData(res.length); console.log(data); }); co(task, './sample.txt'); 

五、async/await

可以看到，上面的方法雖然都在一定程度上解決了異步編程中回調帶來的問題。然而

• function拆分的方式其實僅僅只是拆分代碼塊，時常會不利於后續維護；
• 事件發布/監聽方式模糊了異步方法之間的流程關系；
• Promise雖然使得多個嵌套的異步調用能夠通過鏈式的API進行操作，但是過多的then也增加了代碼的冗余，也對閱讀代碼中各階段的異步任務產生了一定干擾；
• 通過generator雖然能提供較好的語法結構，但是畢竟generator與yield的語境用在這里多少還有些不太貼切。

因此，這里再介紹一個方法，它就是es7中的async/await。

簡單介紹一下async/await。基本上，任何一個函數都可以成為async函數，以下都是合法的書寫形式：

async function foo () {}; const foo = async function () {}; const foo = async () => {}; 

在async函數中可以使用await語句。await后一般是一個Promise對象。

async function foo () { console.log('開始'); let res = await post(data); console.log(`post已完成，結果為：${res}`); }; 

當上面的函數執行到await時，可以簡單理解為，函數掛起，等待await后的Promise返回，再執行下面的語句。

值得注意的是，這段異步操作的代碼，看起來就像是“同步操作”。這就大大方便了異步代碼的編寫與閱讀。下面改寫我們的例子。

const printData = async function (filepath) { let keyword = await readFile(filepath); let count = await queryDB(keyword); let data = await getData(res.length); console.log(data); }); printData('./sample.txt'); 

可以看到，代碼簡潔清晰，異步代碼也具有了“同步”代碼的結構。

注意，其中readFile、queryDB與getData方法都需要返回一個Promise對象。這可以通過在第三部分Promise里提供的方式進行改寫。

后記

異步編程作為JavaScript中的一部分，具有非常重要的位置，它幫助我們避免同步代碼帶來的線程阻塞的同時，也為編碼與閱讀帶來了一定的困難。過多的回調嵌套很容易會讓我們陷入“回調地獄”中，使代碼變成一團亂麻。為了解決“回調地獄”，我們可以使用文中所述的這五種常用方法：

• function拆解
• 事件發布/訂閱模式
• Promise
• Generator
• async / await

理解各類方法的原理與實現方式，了解其中利弊，可以幫助我們更好得進行異步編程。

作者：AlienZHOU
鏈接：http://www.jianshu.com/p/bc7b8d542dcd
來源：簡書