es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢?
1.thunk函数 将函数替换成一个只接受回调函数作为参数的单参数函数
/* Thunk 函数替换的不是表达式,而是多参数函数,将其替换成一个只接受回调函数作为参数的单参数函数。 */
/*
注 fn 传入的是一个函数,传入一个函数形成的方法,传入参数,最后传入callback
在经过两次函数调用后,该函数就换成一个只接受回调函数作为参数的单参数函数
*/
var thunk = function(fn) {
return function() {
let args = Array.prototype.slice.call(arguments);
return function (callback) {
args.push(callback);
return fn.apply(this,args)
}
}
}
2.generator异步编程的示例
/* 异步执行方法 */
function timeout(ms,val) {
return new Promise((res)=>{
setTimeout(()=>{
res(val)
},ms)
})
}
function *fn(){
yield timeout(2000,1)
console.log('222')
yield timeout(3000,2)
yield timeout(2000,3)
return 2;
}
使用while去让上面的generator函数自执行
/* res.value本身是个异步的promise方法,如果几个promise 有关联那么这样就不行了 */
var f = fn();
var res = f.next();
while(!res.done) {
res.value.then((val)=>{
console.log(val)
})
res = f.next();
}
在浏览器可知打印的结果,并不是顺序的,1 3 是同以事件输出的,2是最后输出的
我们也可以使用promise嵌套使其按顺序输出,但是这种并不好,因为可能不知道具体有几个yield,嵌套的方式写的不好看
var f = fn();
var res = f.next();
res.value.then((val)=>{
console.log(val)
return res = f.next().value
}).then((val)=>{
console.log(val)
return res = f.next().value
}).then((val)=>{
console.log(val)
return res = f.next().value
})
我们定义一个generator自执行器(注为什么要提thunk函数,timeout已经经过thunk类似的封装了)
/* 写一个适合generator的执行器 */
function *gn(){
let p1 = yield timeout(2000,1)
console.log(p1)
let p2 = yield timeout(3000,2)
console.log(p2)
let p3 = yield timeout(2000,3)
console.log(p3)
return 2;
}
// 按顺序输出 1 2 3
/* 传入要执行的gen */
/* 其实循环遍历所有的yeild (函数的递归)
根绝next返回值中的done判断是否执行到最后一个,
如果是最后一个则跳出去*/
function run(fn) {
var gen = fn();
function next(data) {
/* 执行gen.next 初始data为undefined */
var result = gen.next(data)
/* 如果result.done 为true 则代表执行到了gen的return,直接跳出去 */
if(result.done) {
return;
}
/* result.value 为promise */
result.value.then(val=>{
next(val)
})
}
/* 调用上一个next方法 */
next();
}
run(gn)
上述输出结构,分别是 1 2 3 ,间隔时间 2s 3s 2s
虽然已经有async和await这样的generator的语法糖了,但是我们还是需了解以下他们的本质。相信您了解了本质,掌握asycn和await更不在话下
文章参考地址,阮一峰老师的 Generator 函数的异步应用 http://es6.ruanyifeng.com/#docs/generator-async
Generator与async function都是返回一个特定类型的对象:Generator: 一个类似{ value: XXX, done: true }这样结构的Object,Async: 始终返回一个Promise,使用await或者.then()来获取返回值
由于Generator可以暂停函数执行,返回任意表达式的值,这使得 Generator有多种应用场景,这篇文章简单整理一些Generator的使用场景:异步操作的同步化表达、控制流管理、部署 Iterator 接口、作为数据结构
Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可以暂停执行,又可以从暂停的位置恢复继续执行。从语法上看,Generator函数就是一个状态机,封装了许多内部状态。
状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果
最近,为了更好地理解Redux Sagas的工作原理,我重学了JavaScript generators的知识,我把从网上收集到的各种知识点浓缩到一篇文章里,我希望这篇文章既通俗易懂,又足够严谨,可以作为初学者的generators使用指南。
实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字
虽然现在使用 async 函数 就可以替代 Generator 执行器了,不过了解下 Generator 执行器的原理还是挺有必要的。如果你不了解 Generator,那么你需要看这里。
这是一只会说话的猫的一些代码,可能是当今互联网上最重要的一种应用。它看起来有点像一个函数,对吗?这被称为生成器-函数,它与函数有很多共同之处。但你马上就能看到两个不同之处。
可以把生成器看作一个值的生产者,我们通过迭代器接口的next 调用一次提取出一个值,所以严格来讲,生成器本身并不是 iterrable,尽管执行一个生成器就得到了一个迭代器
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!