不熟悉生成器對象的小夥伴,可查看: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