前端异步流程工具

前端异步流程工具

1. 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' )
         })
   

2. Generator函数

• 概念， 在function 关键字后面写一个* ，表示一个generator函数
• generator通过 yield 关键字来定义任务
  示例：

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

3. Async函数 √

• async函数式由es6提供的
• async函数的底层其实就是generator函数
• async函数需要和关键字 await 搭配使用
• async也是Promise,也可以调用.then
  格式：

  const asyncFn = async () => {
    await 任务
  }


  var obj = {
    async aa () {
      await 任务
    }
  }

• 注意：
  只有await后面的任务 顺利执行完成，那么下面的任务才会去执行，如果await后面的任务执行不顺利， 那么后面的任务会出问题

• 使用场景：
  先进行数据请求，得到数据之后，在去操作这个数据 ，这个时候，我们的async就是首选

      const asyncFn = async () => {
        const request = await '任务一'
        console.log(' 任务2 ')
        console.log( request )

      }

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

      //如何在对象中使用async
      var obj = {
        async aa () {
            
        }
      }

      $.ajax({
        success (res) {
          console.log( res )
        }
      })

 
4. Node.js 提供的 nextTick

• Node.js提供的两个方法

  1. nextTick
  2. setimmediate
      

• 总结：
  nextTick()的回调函数执行的优先级要高于setImmediate();

  process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

  • idle观察者，也就是事件轮询最先进行的任务
  • I/O观察者， 也就是事件轮询中的任务（任务中的回调函数）
  • check观察者 事件轮询中的任务的结束

  在具体实现上,process.nextTick()的回调函数保存在一个数组中;setImmediate()的结果则是保存在链表中.
  在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完;而setImmediate()在每轮循环中执行链表中的一个回调函数.

• 使用格式：

  process.nextTick( callback )

  setImmediate( callback )

• 执行顺序
  1. nextTick> setImmediate
  2. nextTick 中 的nextTick 》 外层的setImmediate
  3. 外层setImmediate > 内层的setImmediate
      
• 示例：

  process.nextTick( function () {
    console.log('A')
    process.nextTick( function(){
      console.log('D')
    })
    setImmediate( function () {
      console.log('E')
    })
  })
  
  setImmediate( function () {
    console.log( 'B' )
    process.nextTick( function(){
      console.log('F')
    })
    setImmediate( function () {
      console.log('G')
    })
  })
  
  process.nextTick( function () {
    console.log( 'C')
  })
  
  console.log( '主线程任务' )
  

 

5. 第三方的async.js

   • 两种连接方式：
     串行 ： series
     并行： parallel

   串行格式：async.series({ 任务名称： 任务值 },function( err, data ) {})
   并行格式：async.parallel({ 任务名称： 任务值 },function( err, data ) {})
    

   //串行
    var async = require( 'async' )
    async.series({
      one: function( callback ) {
        setTimeout ( function () {
          callback( null, '任务1' )
        },2000)
      },
      two: function ( callback ) {
        setTimeout ( function () {
          callback( null, '任务2')
        },1000)
      }
    },function ( err , data ) {
      console.log( data )
    }) */

    //并行
    async.parallel({
      one: function ( callback ) {
        setTimeout ( function () {
          callback( null , '任务1')
        },2000)
      },
      two: function ( callback ) {
        setTimeout ( function () {
          callback( null , '任务2')
        },1000)
      }
    },function(error,data){
      console.log( data )

      console.log( '任务3' )
    })