博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js异步发展历程
阅读量:7088 次
发布时间:2019-06-28

本文共 3396 字,大约阅读时间需要 11 分钟。

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));复制代码

转载地址:http://cafql.baihongyu.com/

你可能感兴趣的文章
有上下界的网络流问题
查看>>
AspectJ获取方法注解的信息
查看>>
获取泛型的class 反射
查看>>
input 获取当前id,name
查看>>
linux zip 命令详解
查看>>
HDU 4902 Nice boat(线段树)
查看>>
Codeforces Round #114 (Div. 1) E. Wizards and Bets 高斯消元
查看>>
怎样调通微信支付及微信发货通知接口(Js API)
查看>>
Android 属性动画(Property Animation) 全然解析 (下)
查看>>
推断汉字正則表達式更严谨方法!
查看>>
如何避免误删CleanMyMac语言文件
查看>>
Linux下免安装mysql
查看>>
jquery实现返回基部案例效果
查看>>
快钱报错:javax.net.ssl.SSLProtocolException: handshake alert: unrecognized_name解决
查看>>
Hadoop集群WordCount运行详解(转)
查看>>
[转]SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)
查看>>
一次性搞清楚equals和hashCode
查看>>
Android Studio IDE的 LogCat如何过滤指定应用的调试信息
查看>>
23个常用正则表达式(数值和字符串)
查看>>
struts2中struts.xml配置文件详解
查看>>