从C#到TypeScript - Generator
总目录
从C#到TypeScript - Generator
上篇讲了Promise
,Promise
的执行需要不停的调用then
,虽然比callback要好些,但也显得累赘。所以ES6里添加了Generator
来做流程控制,可以更直观的执行Promise,但终级方案还是ES7议案中的async await
。
当然async await
本质上也还是Generator
,可以算是Generator
的语法糖。
所以这篇先来看下Generator.
Generator语法
先来看个例子:
function* getAsync(id: string){
yield 'id';
yield id;
return 'finish';
}
let p = getAsync('123');
console.info(p.next());
console.info(p.next());
console.info(p.next());
先看下和普通函数的区别,function
后面多了一个*
,变成了function*
,函数体用到了yield
,这个大家比较熟悉,C#也有,返回可枚举集合有时会用到。
在ES6里yield
同样表示返回一个迭代器,所以用到的时候会用next()
来顺序执行返回的迭代器函数。
上面代码返回的结果如下:
{ value: 'id', done: false }
{ value: '123', done: false }
{ value: 'finish', done: true }
可以看到next()
的结果是一个对象,value
表示yield
的结果,done
表示是否真正执行完。
所以看到最后return了finish
时done
就变成true了,如果这时再继续执行next()
得到的结果是{ value: undefined, done: true }
.
Generator原理和使用
Generator
其实是ES6对协程的一种实现,即在函数执行过程中允许保存上下文同时暂停执行当前函数转而去执行其他代码,过段时间后达到条件时继续以上下文执行函数后面内容。
所谓协程其实可以看做是比线程更小的执行单位,一个线程可以有多个协程,协程也会有自己的调用栈,不过一个线程里同一时间只能有一个协程在执行。
而且线程是资源抢占式的,而协程则是合作式的,怎样执行是由协程自己决定。
由于JavaScript是单线程语言,本身就是一个不停循环的执行器,所以它的协程是比较简单的,线程和协程关系是 1:N。
同样是基于协程goroutine的go语言实现的是 M:N,要同时协调多个线程和协程,复杂得多。
在Generator
中碰到yield
时会暂停执行后面代码,碰到有next()
时再继续执行下面部分。
当函数符合Generator
语法时,直接执行时返回的不是一个确切的结果,而是一个函数迭代器,因此也可以用for...of
来遍历,遍历时碰到结果done
为true则停止。
function* getAsync(id: string){
yield 'id';
yield id;
return 'finish';
}
let p = getAsync('123');
for(let id of p){
console.info(id);
}
打印的结果是:
id
123
因为最后一个finish
的done
是true,所以for...of
停止遍历,最后一个就不会打印出来。
另外,Generator
的next()
是可以带参数的,
function* calc(num: number){
let count = yield 1 + num;
return count + 1;
}
let p = calc(2);
console.info(p.next().value); // 3
console.info(p.next().value); // NaN
//console.info(p.next(3).value); // 4
上面的代码第一个输出是yield 1 + num
的结果,yield 1
返回1,加上传进来的2,结果是3.
继续输出第二个,按正常想法,应该输出3,但是由于yield 1
是上一轮计算的,这轮碰到上一轮的yield
时返回的总是undefined
。
这就导致yield 1
返回undefined
,undefined + num返回的是NaN
,count + 1也还是NaN,所以输出是NaN
。
注释掉第二个,使用第三个就可以返回预期的值,第三个把上一次的结果3用next(3)传进去,所以可以得到正确结果。
如果想一次调用所有,可以用这次方式来递归调用:
let curr = p.next();
while(!curr.done){
console.info(curr.value);
curr = p.next(curr.value);
}
console.info(curr.value); // 最终结果
Generator
可以配合Promise
来更直观的完成异步操作。
function delay(): Promise<void>{
return new Promise<void>((resolve, reject)=>{setTimeout(()=>resolve(), 2000)});
}
function* run(){
console.info('start');
yield delay();
console.info('finish');
}
let generator = run();
generator.next().value.then(()=>generator.next());
就run
这个函数来看,从上到下执行是很好理解的,先输出'start',等待2秒,再输出'finish'。
只是执行时需要不停的使用then
,好在TJ大神写了CO模块,可以方便的执行这种函数,把Generator
函数传给co
即可。
co(run).then(()=>console.info('success'));
co的实现原理可以看下它的核心代码:
function co(gen) {
var ctx = this;
var args = slice.call(arguments, 1);
return new Promise(function(resolve, reject) {
if (typeof gen === 'function') gen = gen.apply(ctx, args);
if (!gen || typeof gen.next !== 'function') return resolve(gen);
onFulfilled(); //最主要就是这个函数,递归执行next()和then()
function onFulfilled(res) {
var ret;
try {
ret = gen.next(res); // next(), res是上一轮的结果
} catch (e) {
return reject(e);
}
next(ret); // 里面调用then,并再次调用onFulfilled()实现递归
return null;
}
function onRejected(err) { // 处理失败的情况
var ret;
try {
ret = gen.throw(err);
} catch (e) {
return reject(e);
}
next(ret);
}
function next(ret) {
if (ret.done) return resolve(ret.value); // done是true的话表示完成,结束递归
var value = toPromise.call(ctx, ret.value);
if (value && isPromise(value)) return value.then(onFulfilled, onRejected); //递归onFulfilled
return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
+ 'but the following object was passed: "' + String(ret.value) + '"'));
}
});
}
可以看到co的核心代码和我上面写的递归调用Generator
函数的本质是一样的,不断调用下一个Promise,直到done
为true。
纵使有co这个库,但是使用起来还是略有不爽,下篇就轮到async await
出场,前面这两篇都是为了更好的理解下一篇。
从C#到TypeScript - Generator的更多相关文章
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 变量
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 接口
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 类
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - function
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 装饰器
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - Promise
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - async await
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - Reflect
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
随机推荐
- FUNCTION CALL STACK FRAME
function call stack frame 两个寄存器 esp 栈顶指针寄存器,指向调用栈的栈顶(始终指向,意味着栈分配到哪里了,从当前栈往高地址是已经分配了的) ebp 基址指针寄存器,指向 ...
- WebService调用权限验证 SoapHeader
一般在项目中,制作的都是基于SOAP协议的webservices,其描述语言是WSDL.但是有时候在项目中,需要保证webservices的安全,需要对其进行进行验证,那么我们就要实现SoapHead ...
- IOS9任务管理器特效的实现
IOS9任务管理器特效的实现 IOS9中通过双击home键可以打开任务管理器,和以前版本不一样的地方时这这次使用的3D的特效,见下图: 那么如何在我们的APP中也制作出这样的特效呢?在GItHub上有 ...
- UVa 10400 - Game Show Math
题目大意:给出n(n<100)个正整数和一个目标数,按照给出数的顺序,运用+.-.*./四则运算(不考虑优先级),判断能否得出所要的结果. 首先考虑的就是暴力枚举,不过时间复杂度为O(4n),会 ...
- django QuerySet里那些常用又不常见的技巧
QuerySet 像Entry.Objects.all(),这些操作返回的是一个QuerySet对象,这个对象比较特别,并不是执行Objects.all(),或者filter之后就会与数据库交互,具体 ...
- WGCNA算法研究笔记
转自:http://www.gogoqq.com/ASPX/8390905/JournalContent/1303140588.aspx 研究了近半年的算法,记录下来给自己一个交代,也应该是考G前地最 ...
- HTML5学习笔记四:html5结构
一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...
- OC强弱引用的使用规则
强弱引用的唯一区别只是体现在对象的消亡上. 当一个对象不再有强引用指向它时,它就会被销毁. 弱引用不持有对象,不计入自动引入计数,所以不用考虑它销毁的问题.
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中设置margin:0 auto; 水平居中无效的原因分析
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...