异步发展历程,js走过的那十年

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));