js中异步的发展跌跌撞撞走了十年,从开始的回调恶魔发展到现在的仿佛同步的写法。再次回顾,特此总结。
先简述一下我们遇到的问题: 当我们访问一个页面的时候,我们可能需要读取两个文件,一个是模板文件,一个是这个页面的数据文件。引为读取文件都比较耗时,我们通过异步来处理。
let fs = require('fs');fs.readFile('./template.txt', 'utf8', function (err, template) { fs.readFile('./data.txt', 'utf8', function (err, data) { console.log(template + ' ' + data); })})复制代码
看上去好像没有什么问题,两层的嵌套好像还能接受,但是如果请求data.txt后有需要其他文件的数据,这样层层嵌套下去会出现什么现象呢?
fs.readFile('./template.txt', 'utf8', function (err, template) { fs.readFile('./data.txt', 'utf8', function (err, data) { fs.readFile('./data2.txt', 'utf8', function (err, data1) { fs.readFile('./data3.txt', 'utf8', function (err, data2) { fs.readFile('./data4.txt', 'utf8', function (err, data3) { console.log(template + ' ' + data + ' ' + data1 + ' ' + data2 + ' ' + data3); }) }) }) })})复制代码
如果这是被人的代码,你要改其中的一部分。什么感受? 这就是传说中的回调金字塔,又叫回调地狱。它使js代码变的非常难看和难以维护并且效率低下。 如何解决这个问题?
事件发布订阅
我们可以通过node核心模块中的 EventEmitter 类来实现,通过它可以创建事件发射器的实例,里面有两个核心方法,一个叫on,一个叫emit。on表示注册监听事件,emit表示发射事件。
let fs = require('fs');let EventEmitter = require('events');let eve = new EventEmitter();let html = {};//存放最终数据//监听数据获取成功事件,当事件发生之后调用回调函数eve.on('ready', function (key, value) { html[key] = value; if (Object.keys(html).length == 2) { console.log(html);//在此能够获取到两个文件的数据。 }});fs.readFile('./template.txt', 'utf8', function (err, template) { //‘ready’为事件名 ,往后是传递给回调函数的参数 eve.emit('ready', 'template', template);})fs.readFile('./data.txt', 'utf8', function (err, data) { eve.emit('ready', 'data', data);});复制代码
请求template.txt和data.txt文件数据,当成功后发布ready事件。on处订阅了ready事件,当他触发的时候,on方法执行。 有点儿类似我们的绑定事件比如:onClick,给一个元素绑定onClick事件,当页面触发的时候再执行。
哨兵变量
let fs = require('fs');function render(length, cb) { let html = {}; return function (key, value) { html[key] = value; if (Object.keys(html).length == length) { cb(html); } }}//2是一个哨兵变量,将读取文件数据成功后执行的方法作为回调函数传给render方法。let done = render(2, function (html) { console.log(html);});fs.readFile('./template.txt', 'utf8', function (err, template) { done('template', template);})fs.readFile('./data.txt', 'utf8', function (err, data) { done('data', data);})复制代码
不使用回调嵌套遇到的问题是:不知道读取文件的函数什么时候执行完。因为只有全部执行完后才能执行需要文件数据的方法。 上面代码render方法执行时传入的2相当于一个哨兵变量,可以是2,可以是3,取决于后面需要读取几个文件的数据。将需要读取的文件数量,和读取全部文件成功后的方法作为回调函数传入render。done为render执行后返回的函数。 每次获取文件成功后执行done方法即可。 通过这种方法也可以获取到最终全部文件的数据。
Promise/Deferred模式
let fs = require('fs');function readFile(filename) { return new Promise(function (resolve, reject) { fs.readFile(filename, function (err, data) { if (err) reject(err); else resolve(data); }) })}function *read() { let template = yield readFile('./template.txt'); let data = yield readFile('./data.txt'); return template + '+' + data;}co(read).then(function (data) { console.log(data);}, function (err) { console.log(err);});复制代码
Async/ await
let fs = require('fs');function readFile(filename) { return new Promise(function (resolve, reject) { fs.readFile(filename, 'utf8', function (err, data) { if (err) reject(err); else resolve(data); }) })}async function read() { let template = await readFile('./template.txt'); let data = await readFile('./data.txt'); return template + '+' + data;}let result = read();result.then(data=>console.log(data));复制代码