前端异步流程工具

Posted 2021-12-02 ruange

generator函数

es6提供的
function*,这就是generator函数
通过next（）调用，调用几次就执行几个任务

function* p1(){
     yield '任务1';
     yield '任务2';
     yield '任务3';
     yield '任务4';
     yield '任务5';
}
var p = p1();
console.log( p.next() );
console.log( p.next() );
console.log( p.next() );
console.log( p.next() );
console.log( p.next() );

promise

 const p1 = new Promise ( function ( resolve, reject ) {
   resolve( '任务一' )
 })
  .then ( function ( data ) {
    console.log( data )
  })

 const p2 = new Promise ( function ( resolve, reject ) {
   setTimeout( function () {
     resolve( '任务二' )
   },1000)
 })
  .then ( function ( data ) {
    console.log( data )
  })

  console.log( '主线程任务 ')


// Promise 
  //   .all([p1,p2])     // 先执行all中所有任务， 执行完成之后再去执行后面的任务
  //   .then( data => {
  //     console.log( '任务3' )
  //   })
  Promise
    .race([p1,p2])  // race  谁快输出谁
    .then( data => {
      console.log( '任务3' )
    })

es6 async-await

第一种写法

const asyncFn = async function(){
     const 
}

第二种写法

async function aa(){
     await '任务1';
}