简单Async原理

64 阅读1分钟

async是generator和promise的语法糖,可以简单模拟一下

思路就是,利用yield可以进行消息双向传送来实现,执行next(data)时,会传入data到yield位置,同时将下一个yield后的表达式传回

function* generation() {
  const aa = yield 0;
  aa;
  const a = yield 1;
  a;
}

const g= generation()
var {value} = g.next()
value;
({value }) = g.next(4)
value;
// 注意,一开始需要next(),获取第一个yield后表达式。可以理解成默认有个空的yield,进行传值后,返回下一个yield表达式。

再配合Promise的回调就可以啦。当读到yield后的promise后,给它增加一个回调,使得整体不断向前next进行。 然后再加一下判断,当出现一个reject,则直接返回reject。

// 模拟的aasync
function asyncRunner(gn) {
  return new Promise((resolve, reject) => {
    function step(data) {
      let { value, done } = gn.next(data);
      if (done) return resolve(value);

      if (value instanceof Promise) {
        value.then(
          (e) => {
            step(e);
          },
          (e) => {
            reject(e);
          }
        );
      } else {
        step(value);
      }
    }

    step();
  });
}

然后进行测试啦~

// 测试所用,是不是长得很像async和await呀
function* generation() {
  const aa = yield 0;
  const a = yield new Promise((resolve, reject) => resolve(222222222));
  const b = yield new Promise((resolve) => resolve(2222222));
  const c = yield new Promise((resolve, reject) => reject(2222));
  return 111;
}

asyncRunner(generation()).then(
  (e) => {
    console.log(e);
  },
  (e) => {
    console.log(e);
  }
);

笔者水平有限,若有问题,欢迎评论区留言