前端异步流程工具

前端异步流程工具
传统：
回调函数
流行：

1. Promise

             const p1 = new Promise ( function ( resolve ,reject  ) {
               resolve( ' 任务1' );
               } )
               .then( function ( data ) { 
                 console.log( data );
               } )
   
               const p2 = new Promise ( function ( resolve ,reject  ) {
                 setTimeout( function(){
                   resolve( ' 任务2' );
                 } ,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

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

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

  	const asyncFn = async () => {
  	const request = await '任务一'
  	console.log(' 任务2 ')
  	console.log( request )
  
  }
  
  	asyncFn()
  	console.log( '主线程任务' )
  	//主线程任务
  	 //任务2
  	 //任务一
  	```
  
  
  
  
  
  

4. Node.js nextTick setImmidate
   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( '主线程任务' )
//主线程任务
// A
// C
// D
// B
// E
// F
// G

5. 第三方 async.js 库

      第三方的async函数(先npm i async -S下载)
   
      串行 ： 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 )
// })
// //{ one: '任务1', two: '任务2' }

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' )
})
//{ two: '任务2', one: '任务1' }
//任务3