前端异步流程工具

最新推荐文章于 2022-08-06 22:00:24 发布

weixin_30621711

最新推荐文章于 2022-08-06 22:00:24 发布

阅读量89

点赞数

文章标签：前端数据结构与算法 json ViewUI

原文链接：http://www.cnblogs.com/zhaoyingzi/p/10876911.html

版权

前端异步流程工具

传统：

  回调函数

流行：

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

Async函数 *最流行

es6提供的async函数，async函数的底层其实就是generator函数
async函数需要和关键字 await 搭配使用
async也是promise，也可以调用.then()
注意：只有await后面的任务顺利执行完成，那么下面的任务才会去执行，如果awiat后面的任务执行不顺利，那么后面的任务会出问题
使用场景：先进行数据请求，得到数据之后，再去操作这个数据，这个时候，我们的async函数就是首选
以下是使用格式

//格式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()

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('主线程') 
```
第三方 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) })