前端异步流程工具

前端异步流程工具

• 传统：
  回调函数

• 流行：

  1. Promise （es6）
  2. Generator函数 （es6）
  3. Async函数 （es6）
  4. Node.js （nextTick setImmidate）
  5. 第三方 async.js 库

• promise

Promises/A+规范
Promise是一种异步编程的解决方案，本质来说其实它是一种规范，Promises/A+规范，是用来取代回调函数的，用来弥补回调函数的回调地狱，根据规范的定义，一个Promise对象应该至少有以下的基本特点
1.三个状态：padding（进行中）、resolved（成功）、rejected（失败)
2.状态转换：padding --> resolved ; padding --> rejected
3.成功的回调，执行then（），失败的回调，执行catch（），then()和catch()的参数又是回调函数

直接上代码

```
	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函数
  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())

• Async函数

特点

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

格式：

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

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

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

• Node.js

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

• 第三方 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' )
})