前端异步流程工具

前端异步流程工具

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

Generator函数

• 概念， 在function 关键字后面写一个* ，表示一个generator函数
  gen1erator通过 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())
  

Async函数 √

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

格式：

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

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


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

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

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

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

Node.js 提供的 nextTick 和 setimmediate

1. 两者的区别：

   • 在理解两者的区别之前要说一下轮询

   nodejs中是事件驱动的，有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

   • setImmediate()的使用

   即时计时器立即执行工作，它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。

   • Process.nextTick()的使用

   它和 setImmediate() 执行的顺序不一样，它是在事件轮询之前执行，为了防止 I/O 饥饿， 所以有一个默认
   process.maxTickDepth=1000 来限制事件队列的每次循环可执行的 nextTick() 事件的数目。

2. 总结：

   1. nextTick()的回调函数执行的优先级要高于setImmediate();

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

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

   3. 在具体实现上:

   process.nextTick() 的回调函数保存在一个数组中, setImmediate() 的结果则是保存在链表中.

   4. 在行为上:

   process.nextTick() 在每轮循环中会将数组中的回调函数全部执行完.而 setImmediate() 在每轮循环中执行链表中的一个回调函数.

3. 使用格式：

• process.nextTick( callback )

• setImmediate( callback )

4.执行顺序

• nextTick > setImmediate

• nextTick 中 的nextTick > 外层的setImmediate

• 外层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( '主线程任务' )
  //输出结果为 主线程任务 A C D B F E G
  

第三方的async.js

1. 要先下载async模块 命令：

   • $npm i async -D

2. 串行 ： series

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

3. 并行：parallel

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

源代码：

var async = require( 'async' )

//串行输出 { one: '任务1', two: '任务2' } 任务3

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( '任务3' )
}) 

//并行输出{ two: '任务2', one: '任务1' } 任务3

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