前端异步流程工具

前端异步流程工具

传统：

回调函数

流行：

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函数
   1. 概念，在function 关键字后面写一个* ，表示一个generator函数,generator经过 yield 关键字来定义任务
   2. 使用

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函数 *最流行
   1. es6提供的async函数，async函数的底层其实就是generator函数
   2. async函数须要和关键字 await 搭配使用
   3. async也是promise，也能够调用.then()
   4. 注意：只有await后面的任务顺利执行完成，那么下面的任务才会去执行，若是awiat后面的任务执行不顺利，那么后面的任务会出问题
   5. 使用场景：先进行数据请求，获得数据以后，再去操做这个数据，这个时候，咱们的async函数就是首选
   6. 如下是使用格式

   //格式1，将async放在箭头函数参数的前面 var asyncFn=async ()=>{ var req=await '任务1' console.log(req) console.log('任务3') } asyncFn() console.log('任务2') //输出任务2--任务1--任务3 任务2在主线程上，最早运行，其余的在任务队列中，哪一个在前那个先输出 var asyncFn=async ()=>{ var req=await '任务1' console.log('任务3') console.log(req) } asyncFn() console.log('任务2') //输出任务2--任务3--任务1 

   //格式2 对象 async放在函数名前面 var obj={ async aa(){ var data=await '任务1' var res=data console.log(res) } } obj.aa() 

4. Node.js node.js提供的两个方法
   1. process.nextTick(),在事件轮询以前执行，防止I/O饥饿
   2. setImmediate(),在事件轮询以后执行，防止轮询阻塞
   3. 总结:
      • nextTick()的回调函数执行的优先级要高于setImmediate();
      • process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者
      • idle观察者，也就是事件轮询最早进行的任务
      • I/O观察者， 也就是事件轮询中的任务（任务中的回调函数）
      • check观察者 事件轮询中的任务的结束
      • 在具体实现上,process.nextTick()的回调函数保存在一个数组中,setImmediate()的结果则是保存在链表中.
      • 在行为上,process.nextTick()在每轮循环中会将数组中的回调函数所有执行完,而setImmediate()在每轮循环中执行链表中的一个回调函数.
   4. 使用格式：
      • process.nextTick( callback )
      • setImmediate( callback )
   5. 执行顺序:
      • nextTick> setImmediate
      • nextTick 中 的nextTick > 外层的setImmediate
      • 外层setImmediate > 内层的setImmediate

   process.nextTick(function(){ console.log('1') process.nextTick(()=>{ console.log('3') }) }) setImmediate(function(){ console.log('b') }) process.nextTick(function(){ console.log('2') }) console.log('主线程') 

5. 第三方 async.js 库 串行series 并行parallel
   1. js文件引入另外一个js文件，须要使用模块化引入，首先建立package.json文件，再下载async包
   2. 格式
      • series格式：async.series({},(err,data)=>{})
      • parallel格式：async.series({},(err,data)=>{})

//引入async模块 var async=require('async') //串行 async.series({//以耗时最多的任务为主，结束才能走过去 one:function(callback){ callback(null,'任务1') }, two:function(callback){ setTimeout(()=>{ callback(null,'任务2') },1000) } },(err,data)=>{ console.log(data) }) 

//引入async模块 var async=require('async') // async.parallel({//等待最长的耗时结束，先输出耗时短的，在输出耗时长的 one:(callback)=>{ setTimeout(()=>{ callback(null,'任务1') },2000) }, two:(callback)=>{ setTimeout(()=>{ callback(null,'任务2') },1000) } },(error,data)=>{ console.log(data) })