您好,登录后才能下订单哦!
今天小编给大家分享一下javascript回调问题如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
回调地狱
对 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); }
以上就是“javascript回调问题如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。