微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

后端程序员的 Js 之旅 : 回调地狱终结者

2016-05-05 21:39 前端大全

(点击上方公众号,可快速关注)


作者:李少鹏(@BenjaLi) 

链接:http://lishaopeng.com/2016/03/06/js-cbhell/



回调地狱


对 JavaScript 程序员来说,处理回调是家常,但是处理层次过深的回调就没有那么美好了,下面的示例代码片段用了三层回调,再补脑一下更多层的场景,简直是酸爽,这就是传说中的回调地狱。


getDirectories(function(dirs) {

    getFiles(dirs[0], function(files) {

        getContent(files[0], function(file, content) {

            console.log('filename:', file);

            console.log(content);

        });

    });

});

 

function getDirectories(callback) {

  setTimeout(function() {

    callback(['/home/ben']);

  }, 1000);

}

 

function getFiles(dir, callback) {

    setTimeout(function() {

        callback([dir + '/test1.txt', dir + '/test2.txt']);

    }, 1000)

}

 

function getContent(file, callback) {

    setTimeout(function() {

        callback(file, 'content');

    }, 1000)

}


解决方案


生态圈中有很多异步解决方案可以处理回调地狱的问题,比如 bluebird、Q 等,本文重点介绍 ECMAScript 6/7 规范中对异步编程的支持。


ES6 Promise


Promise 是一种异步编程的解决方案,是解决回调地狱问题的利器。

Promise 在 JavaScript 生态圈被主流接受是在 2007 年 Dojo 框架增加了 dojo.Deferred 的功能。随着 dojo.Deferred 的流行,在 2009 年 Kris Zyp 提出了 CommonJS Promises/A 规范。随后生态圈中出现了大量 Promise 实现包括 Q.js、FuturesJS 等。当然 Promise 之所有这么流行很大程度上是由于 jQuery 的存在,只是 jQuery 并不完全遵守 CommonJS Promises/A 规范。随后正如大家看到的,ES 6 规范包含了 Promise。

MDN 中对 Promise 是这样描述的:


Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的


以下的代码是「回调地狱」一节中的示例通过 Promise 实现,看上去代码也不是很简洁,但是比起传统的层级回调有明显改善,代码可维护性和可读性更强。


getDirectories().then(function(dirs) {

    return getFiles(dirs[0]);

}).then(function(files) {

    return getContent(files[0]);

}).then(function(val) {

    console.log('filename:', val.file);

    console.log(val.content);

});

 

function getDirectories() {

    return new Promise(function (resolve, reject) {

        setTimeout(function() {

        resolve(['/home/ben']);

      }, 1000);

    });

}

 

function getFiles(dir) {

    return new Promise(function (resolve, reject) {

        setTimeout(function() {

            resolve([dir + '/test1.txt', dir + '/test2.txt']);

        }, 1000);

    });

}

 

function getContent(file) {

    return new Promise(function (resolve, reject) {

        setTimeout(function() {

            resolve({file: file, content: 'content'});

        }, 1000);

    });

}


ES6 Generator


Promise 的实现方式还不够简洁,我们还需要更好的选择,co 就是选择之一。co 是基于 Generator(生成器)的异步流控制器,了解 co 之前首先需要理解 Generator。熟悉 C# 的同学应该都有了解,C# 2.0 的版本就引入了 yield 关键字,用于迭代生成器。ES 6 Generator 跟 C# 相似,也使用了 yield 语法糖,内部实现了状态机。具体用法可以参考 MDN 的文档 function* 一节,原理可以参考AlloyTeam 团队 Blog 深入理解 Generator。使用 co 巧妙结合 ES6 Generator 和 ES6 Promise 让异步调用更加和谐。


co(function* (){

    var dirs = yield getDirectories();

    var files = yield getFiles(dirs[0]);

    var contentVal = yield getContent(files[0]);

    console.log('filename:', contentVal.file);

    console.log(contentVal.content);

});


co 非常巧妙,其核心代码可以简化如下的示例,大体思路是采用递归遍历生成器直到状态完成,当然 co 做的跟多。


runGenerator();

 

function* run(){

    var dirs = yield getDirectories();

    var files = yield getFiles(dirs[0]);

    var contentVal = yield getContent(files[0]);

    console.log('filename:', contentVal.file);

    console.log(contentVal.content);

}

 

function runGenerator(){

    var gen = run();

 

    function go(result){

        if(result.done) return;

        result.value.then(function(r){

            go(gen.next(r));

        });

    }

 

    go(gen.next());

}


ES7 Async/Await


ES6 Generator 确实很好,只可惜需要第三方库的支持。好消息是 ES 7 会引入 Async/Await 关键字完美解决异步调用的问题。好吧,.net 又领先了一步,.net framework 4.5 已经率先支持了。

今后的代码写起来是这样:


run();

async function run() {

    var dirs = await getDirectories();

    var files = await getFiles(dirs[0]);

    var contentVal = await getContent(files[0]);

    console.log('filename:', contentVal.file);

    console.log(contentVal.content);

}


结论


从经典的回调的异步编程方式,到 ES6 Promise 规范对异步编程的改善,再到 co 结合 ES Generator 优雅处理,最后 ES7 async/await 完美收官,可以让我们了解为什么 ECMAScript 会出现这些特性以及解决了什么问题,更加清晰地看到 JavaScript 异步编程发展的脉络。


参考:

  • Async JavaScript

  • MDN JavaScript reference – Promise

  • MDN JavaScript reference – function*

  • 深入理解 Generator

  • ECMAScript 6入门


【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!



点击阅读原文,了解野狗

 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 无损数据压缩算法的历史 iPod之父“不务正业” 也开始“玩”智能小车 iOS开发/设计面试题汇总,你将如何作答? IntelliJ IDEA 14.1中的Docker支持 Life is Short! 努力将浪费生命的事情踢走!