JS: 模拟async/await语法糖

不熟悉生成器对象的小伙伴，可查看：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