前端异步流程工具

Posted 2021-11-30 zhaoyingzi

前端异步流程工具

传统：

  回调函数

流行：

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)
          })