async原理实现

前言

如果不了解使用的可参考 async 函数，这里不再赘述。

想要看原理的童鞋，需要了解下 Generator函数

原理

async实现就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args) {
    
    // ...
}
function fn(args) {
    
    return spawn(function* () {
    
        // ...
    })
}

所有的 async 函数都可以写成上面的第二种形式，其中 spawn 函数就是自动执行器。

function spawn(genF) {
    
  return new Promise(function(resolve, reject) {
    
    const gen = genF();
    function step(nextF) {
    
      let next;
      try {
    
        next = nextF();
      } catch(e) {
    
        return reject(e);
      }
      if(next.done) {
    
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
    
        step(function() {
     return gen.next(v); });
      }, function(e) {
    
        step(function() {
     return gen.throw(e); });
      });
    }
    step(function() {
     return gen.next(undefined); });
  });
}

常见面试题

• 实现一个sleep
• 实现一个红绿灯： 红灯2秒，黄灯1秒，绿灯3秒
• 使用 async 实现 Promise.all()的效果

实现一个 sleep： 每隔1秒输出 1， 2， 3， 4， 5

function sleep(interval) {
    
    return new Promise(resolve => {
    
        setTimeout(resolve, interval);
    })
}

// 用法
async function one2FiveInAsync() {
    
    for (let i = 1; i <= 5; i++) {
    
        console.log(i);
        await sleep(1000);
    }
}
one2FiveInAsync();

实现一个红绿灯： 红灯2秒，黄灯1秒，绿灯3秒

function sleep(duration) {
    
    return new Promise(resolve => {
    
        setTimeout(resolve, duration);
    })
}
async function changeColor(color, duration) {
    
    console.log('当前颜色', color);
    await sleep(duration);
}
async function main() {
    
    await changeColor('红色', 2000);
    await changeColor('黄色', 1000);
    await changeColor('绿色', 3000);
}
main();

使用 async 实现 Promise.all()的效果

async function test() {
    
  const getFoo = (i) => {
    
    return new Promise(resolve => setTimeout(() => {
    
      resolve(i)
    }, 1000))
  }
  // 写法一
  // let values = await Promise.all([getFoo(1), getFoo(2), getFoo(3), getFoo(4)]);
  
  // 写法二
  const f1 = getFoo(1)
  const f2 = getFoo(2)
  const f3 = getFoo(3)
  const f4 = getFoo(4)
  let values = [await f1, await f2, await f3, await f4]

  console.log('values', values)
}
test()