封装 generator 为 async 函数

最新推荐文章于 2025-07-06 17:42:47 发布

原创最新推荐文章于 2025-07-06 17:42:47 发布 · 654 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#generator #async #异步

JS 同时被 2 个专栏收录

40 篇文章

订阅专栏

随记

31 篇文章

订阅专栏

本文探讨了generator和iterator的概念，强调了generator返回的迭代器需要手动调用next来推进状态。文章进一步介绍了如何将generator封装为自执行的async函数，指出async函数是迭代器的语法糖，确保异步操作按顺序执行，并返回Promise。通过实例展示了如何封装Promise和其他异步操作，利用回调函数调用next以控制异步流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

generator 和 iterator

对于 generator 生成的迭代器，调用函数，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，总是需要手动调用 next 函数去获取下一个迭代器状态

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator(); // 返回一个状态

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true } done 为 true 代表状态机执行完

hw.next()
// { value: undefined, done: true }

上例来自 generator

封装 generator 为自执行函数 async

async 可以看做迭代器的一个语法糖，在async 里面封装一个自执行函数，需要注意 async 函数里面所有异步都会被同步处理，上一个异步执行完成才会执行下一个异步操作，最后返回 Promise 对象

封装 promise 异步操作

function gen(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(time)
      resolve()
    }, time)
  })
}

function* generator() {
  yield gen(100);
  yield gen(200);
}

function _async(gen) {
  return new Promise((resolve, reject) => {
    const iter = gen();
    const res = [];
    const run = () => {
      let item = iter.next();
      if (!item.done) {
        res.push(item.value);
        item.value.then(() => {
          run();
        });
      } else {
        resolve(res);
      }
    };
    run();
  })
}

_async(generator).then(res => console.log(res));

封装其他异步操作

通过回调函数形式去调用 next 执行，获取下一个状态

function gen(fb, time) {
  setTimeout(_ => {
    console.log(time)
    fb(time)
  }, time);
}

function* generator(fb) {
  yield gen(fb, 100);
  yield gen(fb, 200);
}

function _async(gen) {
  return new Promise((resolve, reject) => {
    const run = () => {
      let item = iter.next(run);
      if (!item.done) {
        res.push(item.value);
      } else {
        resolve(res);
      }
    };
    const iter = gen(run);
    const res = [];
    run();
  })
}

_async(generator);