前端异步流程工具

传统异步处理

1. 回调函数
2. 事件
3. 计时器

流行的异步处理

1. Promise
2. Generator 函数
3. Async 函数
4. Nodejs 自带多大的异步处理工具 nextTick,setimmidate
5. 第三方 async.js 库

Promise

const p2 = new Promise(function(resolve, reject) {

setTimeout(function() {

resolve('任务1')

}, 1000)

})
.then(function(data) {

console.log(data)

})
const p1 = new Promise(function(resolve, reject) {

resolve('任务2')

})
.then(function(data) {

console.log(data)

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

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

结果：主线程 任务2 任务4 任务1 任务3 

Generator

• 概念， 在function 关键字后面写一个* ，表示一个generator函数
• generator通过 yield/return 关键字来定义任务
• 通过next（）来执行任务，它是一个对象
  { value:任务名，done:false/true}//当所有的异步任务完成时done的值就会变成true

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

Async函数

1. async函数是由es7提供的
2. async函数的底层其实就是generator函数
3. async函数需要和关键字 await 搭配使用
4. 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().then(（）=>{ console.log（"async任务结束"）})
console.log( '主线程任务' )

结果：主线程任务，任务2，任务1，任务结束

如果任务2和任务1的输出换位则
结果为：主线程任务，任务1，任务2，任务结束

Node提供的nextTick和setimmediate函数

nextTick

• nextTick函数属于process模块
• process模块挂载在全局对象global上，所以不需要模块化引入
• 语法：process.nextTick( callback )

setimmediate

• setimmediate函数直接挂载在全局对象global上，所以可以直接使用
• 语法： setImmediate( callback )

nextTick与setimmediate比较

• 优先级

nextTick()的回调函数 > setImmediate();

• 回调函数

1. process.nextTick()的回调函数保存在一个数组中，
   在每轮循环中会将数组中的回调函数全部执行完
2. setImmediate()的结果则是保存在链表中，
   在每轮循环中执行链表中的一个回调函数

• 执行顺序

1. nextTick > setImmediate
2. nextTick 中 的nextTick > 外层的setImmediate
3. 外层setImmediate > 内层的setImmediate

nextTick与setimmediate的原理

• 轮询（上面说的每轮循环，字没敲错，查过了）

nodejs中是事件驱动（两大特征：事件驱动和非阻塞式I/O模型）的，有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

• 三个观察者
  • idle观察者： 事件轮询最先进行的任务
  • I/O观察者： 事件轮询中的任务（任务中的回调函数）
  • check观察者：事件轮询中的任务的结束
  • idle > I/O > check

process.nextTick()函数属于idle观察者
setimmediate（）函数属于check观察者

• setImmediate()

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

• Process.nextTick()

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

测试

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函数

• 主要api
  • series 串行
  • parallel 并行
• series语法
  async.series({ 任务名称： 任务值 },function( err, data ) {})
• parallel语法
  async.parallel({ 任务名称： 任务值 },function( err, data ) {})

async函数使用步骤

• 项目根目录下 npm init -y
• npm i async -D / -S
• 在使用文件中 require（‘async’）引入

测试代码如下:

// series

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' }
用时：3s+


// parallel
var async = require( 'async' )

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
用时：2s+