es6 generator函数的异步编程
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
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！