JS co 函数库的含义和用法实例总结


Posted in Javascript onApril 08, 2020

本文实例讲述了JS co 函数库的含义和用法。分享给大家供大家参考,具体如下:

继续学习阮一峰老师异步编程四部曲之三:co

co在很早之前就听超哥讲过,说在node编程中大量用到,源码很简单,但是想法很强大。

让我有空抓紧了解下,前一段时间弄离职的事情,跑来跑去累的够呛。

现在终于一切回归正常了,还在拼命的适应新公司的节奏。只能趁周末继续学习了。

好了,不瞎扯了,回归主题,前两篇文章我们分别学习了 Generator 函数和 Thunk 方式的自动执行。

今天我们接着上次的思路学习使用 co 工具实现 Generator 函数的自动执行。

再次拿出上一节的示例:

var fs = require('fs');
var thunkify = require('thunkify');
var readFile = thunkify(fs.readFile);
 
var gen = function* (){
 var r1 = yield readFile('/etc/fstab');
 console.log(r1.toString());
 var r2 = yield readFile('/etc/shells');
 console.log(r2.toString());
};

这段代码用于读取两个文件,怎么使用 co 工具来实现自动执行呢?

很简单:

var co = require('co');
co(gen);

上面代码中,只要把 Generator 函数传入 co 函数,就会自动执行。

co 函数返回一个 Promise 对象,因此可以用 then 方法添加回调函数,当 Generator 执行结束就会触发回调:

co(gen).then(function (){
 //success
});

这么看起来的话好像和我们之前的 Thunk 方式差不多啊,只是把 run 函数名改成了 co

唯一的区别是多了一层 Promise 包装,那么 co 和 Thunk 到底有什么区别呢?

正如我们的猜测一样,co 其实是将之前的两种自动执行方式(Thunk 和 Promise)结合到了一起,包装成一个库。

使用它的前提和比Thunk多了一种 Promise 的情况,也就是yield返回值必须是 Thunk 函数和 Promise 对象之一

实现原理:

之前我们在研究 Thunk 函数时的第一步是使用 thunkify 将 readFile 包装成 Thunk 函数:

今天我们研究 Promise 就需要把 readFile 包装成 Promise 对象,看代码:

var fs = require('fs');
 
var readFile = function (fileName){
 return new Promise(function (resolve, reject){
  fs.readFile(fileName, function(error, data){
   if (error) reject(error);
   resolve(data);
  });
 });
};
 
var gen = function* (){
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

接下来是我特别喜欢老师做的一件事,先用最原始的方式,手动执行一遍代码。

在我们日常开发的过程中,也可以参考这种方式。当逻辑复杂时,不妨先用最直白的方式把它实现,

然后再去发现里面的规则,去优化重构。又开始扯了,看一下手动执行的代码:

var g = gen();
 
g.next().value.then(function(data){
 g.next(data).value.then(function(data){
  g.next(data);
 });
});

手动执行其实就是用 then 方法,层层添加回调函数。理解了这一点,就可以写出一个自动执行器:

function run(gen){
 var g = gen();  //开始执行
 
 function next(data){
  var result = g.next(data);
  if (result.done) return result.value;
  result.value.then(function(data){
   next(data);
  });
 }
 next();
}
run(gen);

和Thunk函数的区别是,Thunk 函数在执行成功后把 next 传给 thunkify ,让 thunkify 来帮忙执行 next

这里的做法是吧 next 交给 Promise,promise 控制请求成功时执行 next。区别只有这么一点。

分析了原理之后,我们来分析下co的源码:

co 函数接受一个 Generator 参数,返回一个 Promise 对象

function co(gen) {
 var ctx = this;
 
 return new Promise(function(resolve, reject) {
 });
}

在返回的 Promise 对象里面,先检查参数 gen 是否为 Generator 函数。如果是,就执行该函数,得到一个内部指针对象;

如果不是就返回,并将 Promise 对象的状态改为 resolved 。

function co(gen) {
 var ctx = this;
 
 return new Promise(function(resolve, reject) {
  if (typeof gen === 'function') gen = gen.call(ctx);
  if (!gen || typeof gen.next !== 'function') return resolve(gen);
 });
}

接着,co 对 next 方法进行包装,使异常能够暴露出来:

function co(gen) {
 var ctx = this;
 
 return new Promise(function(resolve, reject) {
  if (typeof gen === 'function') gen = gen.call(ctx);
  if (!gen || typeof gen.next !== 'function') return resolve(gen);
 
  onFulfilled();
  function onFulfilled(res) {
   var ret;
   try {
    ret = gen.next(res);
   } catch (e) {
    return reject(e);
   }
   next(ret);
  }  
 });
}

最后就是next方法了:

function next(ret) {
 if (ret.done) return resolve(ret.value);
 var value = toPromise.call(ctx, ret.value);
 if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
 return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
    + 'but the following object was passed: "' + String(ret.value) + '"'));
  }
});

next方法最主要的一行:

if (value && isPromise(value)) return value.then(onFulfilled, onRejected);

co的使用条件,每一次yield返回必须是Promise对象,当promist处理成功时再次执行onFulfilled

以此来达到自动执行的效果。

co 还支持并发的异步操作,yield 返回一个数组或者是支持遍历的对象即可:

// 数组的写法
co(function* () {
 var res = yield [
  Promise.resolve(1),
  Promise.resolve(2)
 ];
 console.log(res); 
}).catch(onerror);
 
// 对象的写法
co(function* () {
 var res = yield {
  1: Promise.resolve(1),
  2: Promise.resolve(2),
 };
 console.log(res); 
}).catch(onerror);

至此,co 的自动执行原理我们已经学习完成了,

其实本质上不是很难,只是涉及到的模块较多,思路比较灵活

对我的小容量大脑来说,现在的认识还只到90%

所以这篇文章里面自己的思想比较少,更多的还是在复述老师的思路。

最后贴上原文的地址:co 函数库的含义和用法

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
You might like
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
python比较2个xml内容的方法
2015/05/11 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
员工拓展培训方案
2014/02/15 职场文书
小学三年级学生评语
2014/04/22 职场文书
爱我中华演讲稿
2014/05/20 职场文书
大学生求职信范文
2014/05/24 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
推普周活动总结
2014/08/28 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
解除施工合同协议书
2014/10/17 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
客户答谢会致辞
2015/07/30 职场文书
女性励志书籍推荐
2019/08/19 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python