自己实现async,await

694 阅读1分钟

首先我们来看一段代码

模拟请求:

let getData = function (time) {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve(1);
    },time);
  })
}

使用await,async函数:

async function asyncFun() {
  const a = await getData(1000);
  console.log(a);
  const b = await getData(2000);
  console.log(b);
  return a+b;
}

async function test(){
    console.log(await asyncFun());
}

当我们执行test的时候我们会在控制台按照次序输出1,1,2

按照这个思路,我写了如下代码:

function* asyncFun() {
  const a = yield getData(1000);
  console.log(a);
  const b = yield getData(2000);
  console.log(b);
  return a+b;
}

function* test() {
  console.log(await asyncFun());
}

现在的目标是期望执行test有相同的效果,然而我们知道generate函数是不能自动执行完成的,所以我们需要包装一层高阶函数:

const asyncFun2 = asyncFN(asyncFun);
const test2 = asyncFN(test);

我们只需要让asyncFN来帮我们执行就好了,现在来看实现方式:

const asyncFN = (work)=>{
  let gen = work();
  const wait = ()=>{
    return new Promise((resolve)=>{
      const run = (res)=>{
        res = gen.next(res);
        if(res.done){
          resolve(res.value)
        }else {
          res.value.then((v)=>{
            run(v)
          })
        }
      };
      run();
    })
  };
  return wait;
};

这就是我的思考过程吧,简单做个笔记