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 Eval 函数使用
Mar 23 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
全面了解js中的script标签
Jul 04 Javascript
Vue.js对象转换实例
Jun 07 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
async/await地狱该如何避免详解
May 10 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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
PHP 七大优势分析
2009/06/23 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
便捷提取python导入包的属性方法
2018/10/15 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python 转换文本编码实现解析
2019/08/27 Python
用Python写一个自动木马程序
2019/09/17 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
2013年员工自我评价范文
2013/12/27 职场文书
创业融资计划书
2014/04/25 职场文书
无传销社区工作方案
2014/05/13 职场文书
企业员工薪酬方案
2014/06/04 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
员工辞职信范文
2015/03/02 职场文书
python 爬取华为应用市场评论
2021/05/29 Python