Async principle implementation

Preface

If you don't know what to use, you can refer to async function , No more details here .

Children's shoes that want to see the principle , I need to know something about Generator function

principle

async Implementation is to Generator Functions and Automatic actuators , Wrapped in a function .

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

be-all async Functions can be written in the second form above , among spawn A function is an automatic actuator .

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); });
  });
}

Frequently asked questions

• Achieve one sleep
• Realize a traffic light ： A red light 2 second , Yellow light 1 second , A green light 3 second
• Use async Realization Promise.all() The effect of

Achieve one sleep： every other 1 A second output 1, 2, 3, 4, 5

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

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

Realize a traffic light ： A red light 2 second , Yellow light 1 second , A green light 3 second

function sleep(duration) {
    
    return new Promise(resolve => {
    
        setTimeout(resolve, duration);
    })
}
async function changeColor(color, duration) {
    
    console.log(' Current color ', color);
    await sleep(duration);
}
async function main() {
    
    await changeColor(' Red ', 2000);
    await changeColor(' yellow ', 1000);
    await changeColor(' green ', 3000);
}
main();

Use async Realization Promise.all() The effect of

async function test() {
    
  const getFoo = (i) => {
    
    return new Promise(resolve => setTimeout(() => {
    
      resolve(i)
    }, 1000))
  }
  //  Writing a 
  // let values = await Promise.all([getFoo(1), getFoo(2), getFoo(3), getFoo(4)]);
  
  //  Write two 
  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()