首先写一个获取promise的函数:
const getPromise = function(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(++val)
},1000)
})
}
再写一个generator函数:
function *generatorFn(){
const res1 = yield getPromise(1)
console.log(res1)
const res2 = yield getPromise(res1)
console.log(res2)
}
现在写执行器函数(版本1):
function run(){
const gen = generatorFn()
gen.next().value.then(val1=>{
gen.next(val1).value.then(val2=>{
gen.next(val2)
})
})
}
结合以上三段代码在控制台测试,在1秒后输出2,再过1秒后输出3,符合预期。
generator函数里如果不止两个异步,执行器run函数里多层嵌套肯定不行,还是得写个递归(版本2):
function run(){
const gen = generatorFn()
const runNext = (res)=>{
const genNext = res===undefined ? gen.next() : gen.next(res)
if(genNext.done) return
genNext.value.then(val=>{
runNext(val)
})
}
runNext()
}
如果异步不是promise来实现,而是回调函数,比如:
const getData = function(val){
return (cb)=>{
setTimeout(()=>{
cb(++val)
},1000)
}
}
function *generatorFn(){
const res1 = yield getData(1)
console.log(res1)
const res2 = yield getData(res1)
console.log(res2)
}
run需要写的更加通用(版本3):
function run(){
const gen = generatorFn()
const runNext = (res)=>{
const genNext = res === undefined ? gen.next() : gen.next(res)
if(genNext.done) return
if(typeof genNext.value === 'function'){
genNext.value((val)=>{
runNext(val)
})
}else{
genNext.value.then(val=>{
runNext(val)
})
}
}
runNext()
}
控制台测试一下,bingo,算是完成一个简单版本的generator执行器!
完结撒花,有问题留言讨论!