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的实现库,例如bluebirdQ等。下面以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对象,并在异步回调中根据不同的情况使用rejectresolve来改变Promise对象的状态。该方法返回这个Promise对象。其他的一些异步方法也可以参照这种方式进行改造。

假设通过改造,readFilequeryDBgetData方法均会返回一个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连接的链式操作。代码的整洁度上有了一个较大的提高。

四、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, arrayobject。可以改写文章一开始的例子:

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虽然能提供较好的语法结构,但是毕竟generatoryield的语境用在这里多少还有些不太贴切。

因此,这里再介绍一个方法,它就是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');

可以看到,代码简洁清晰,异步代码也具有了“同步”代码的结构。

注意,其中readFilequeryDBgetData方法都需要返回一个Promise对象。这可以通过在第三部分Promise里提供的方式进行改写。

后记

异步编程作为JavaScript中的一部分,具有非常重要的位置,它帮助我们避免同步代码带来的线程阻塞的同时,也为编码与阅读带来了一定的困难。过多的回调嵌套很容易会让我们陷入“回调地狱”中,使代码变成一团乱麻。为了解决“回调地狱”,我们可以使用文中所述的这五种常用方法:

  • function拆解
  • 事件发布/订阅模式
  • Promise
  • Generator
  • async / await

理解各类方法的原理与实现方式,了解其中利弊,可以帮助我们更好得进行异步编程。


Happy Coding!


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 115,637评论 1 231
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 49,826评论 1 197
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 70,462评论 0 162
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 34,711评论 0 123
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 41,461评论 0 204
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 34,348评论 1 123
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 26,351评论 2 204
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 25,527评论 0 117
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 24,475评论 5 168
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 28,496评论 0 176
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 25,775评论 1 166
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 27,035评论 1 173
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 21,395评论 0 24
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 24,021评论 2 162
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 27,733评论 3 168
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 22,749评论 0 4
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 22,912评论 0 111
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 28,935评论 2 183
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 29,361评论 2 185

推荐阅读更多精彩内容

  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,199评论 5 22
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,632评论 0 5
  • 本文旨在通过实例演示JS异步编程几种常见的解决方案,让你写出最优雅的异步代码。 异步是Javascript区别于其...
    沐童Hankle阅读 3,254评论 2 3
  • 本文首发在个人博客:http://muyunyun.cn/posts/7b9fdc87/ 提到 Node.js, ...
    牧云云阅读 1,644评论 0 3
  • 选择权 一七七五年,美国人帕特里克·亨利面对英国政府的殖民统治,向同胞大声疾呼:不自由,毋宁死!(give me ...
    江左不归人阅读 187评论 0 0