前端五种异步流程工具的基本介绍

前端五种异步流程工具

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   先执行all中所有任务， 执行完成之后再去执行后面的任务
   .then(data => {
       console.log('任务三')
   })
   //输出顺序:主线程任务--任务一--任务二--任务三
   
   Promise
   .race([p1, p2]) // race  谁快输出谁
   .then(data => {
       console.log('任务三')
   })
   //输出顺序:主线程任务--任务一--任务三--任务二
   

2. Generator函数

   • 概念:在 function 关键字后面写一个* ，表示一个 generator 函数
   • generator 通过 yield 关键字来定义任务

   function* p1() {
       yield '任务1';
       yield '任务2';
       yield '任务3';
       yield
       function* p2() {      //yield里面可继续接generator函数
           yield '任务5'
       }
       return '任务4'        //运行到最后一个返回true
   }
   var p = p1()
   console.log(p.next())
   console.log(p.next())
   console.log(p.next())
   console.log(p.next())
   console.log(p.next())
   //输出
   //{ value: '任务1', done: false }
   //{ value: '任务2', done: false }
   //{ value: '任务3', done: false }
   //{ value: undefined, done: false }
   //{ value: '任务4', done: true }
   

3. Async函数

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

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

      2. 对象里面使用格式

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

   3. 使用场景
      • 先进行数据请求，得到数据之后，在去操作这个数据 ，这个时候，我们的async就是首选
   4. 注意问题
      • 只有await后面的任务 顺利执行完成，那么下面的任务才会去执行，如果await后面的任务执行不顺利， 那么后面的任务会出问题
   5. 例：

   const asyncFn = async() => {
   const request = await '任务一'
   console.log(' 任务二 ')
   console.log(request)
   }
   asyncFn()
   console.log('主线程任务')
   //顺序：主线程任务--任务二--任务一
   

4. Node.js 提供的 nextTick 和 setimmediate

   1. nextTick()的回调函数执行的优先级要高于setImmediate();

   2. process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

      idle观察者，也就是事件轮询最先进行的任务
      I/O观察者， 也就是事件轮询中的任务（任务中的回调函数）
      check观察者 事件轮询中的任务的结束

      在具体实现上,process.nextTick()的回调函数保存在一个数组中,
      setImmediate()的结果则是保存在链表中.
      在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
      而setImmediate()在每轮循环中执行链表中的一个回调函数.

   3. 使用格式：
      process.nextTick( callback )
setImmediate( callback )

   4. 执行顺序

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

   5. 代码实现

   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
   

5. 第三方的async.js

   1. 串行 : series 当执行的代码其中有一个错误的时候其他代码运行就有问题
   2. 并行 : parallel 当执行的代码其中有一个错误的时候其他代码运行不会受到影响
   3. 格式：
      • 串行 async.series({ 任务名称： 任务值 },function( err, data ) {})
      • 并行 async.parallel({ 任务名称： 任务值 },function( err, data ) {})
   4. 代码实现

   var async = require('async')
   async.series({        //此处将series改成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')
   })