不熟悉生成器对象的小伙伴,可查看:Generator、Generator.prototype.next
基于Generator和Promise实现 async(async是自带自动执行器的Generator迭代器函数)
模拟函数:
/** * 自动执行的迭代器函数 * (不返回Promise对象也是可以的) * @param generator * @return {Promise} */ const run = generator => { return new Promise((resolve, reject) => { // 获取iterator对象(可迭代对象) const gen = generator(); // 初始化iterator对象的next指针 let next = null; /** * 执行下一步 * @param {Iterator} genNextFn - gen.next函数 * @return {undefined} */ const goToNextStep = genNextFn => { try { // 更新next指针 next = genNextFn(); } catch(ex) { reject(ex); return; } // 如果完成了对iterator的遍历 if (next?.done === true) { resolve(next.value); return; } // 否则,递归执行下一步 Promise.resolve(next.value) .then(v => goToNextStep(() => gen.next(v))) .catch(e => goToNextStep(() => gen.next(e))); }; goToNextStep(() => gen.next()); }); }; const runMiniAsync = () => run(function* () { const r1 = yield new Promise(resolve => setTimeout(() => resolve(1), 800)); console.log('===>', r1); const r0 = 'x'; console.log('->', r0); const r2 = yield new Promise(resolve => setTimeout(() => resolve(2), 600)); console.log('==>', r2); }); runMiniAsync();
模拟函数执行过程示意:
// gen -> Iterator{} // next -> null // goToNextStep() // next -> { value: Promise{1}, done: false } // ::fulfilled(1) // goToNextStep() //// => yield 1 // next -> { value: Promise{2}, done: false } // ::fulfilled(2) // goToNextStep() //// => yield 2 // next -> { value: undefined, done: true } // ::end