JS: 模擬async/await語法糖

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章