前端的异步流程工具

###1. 前端异步流程工具
传统方案:
1.回调函数
2.事件
工具的方案:

Promise

1. 通过new  Promise()
2. 参数是一个回调函数， 回调函数中有两个参数 （resolve  reject）
    * resolve也是一个函数， 函数中接收参数， 参数为任务
    * resolve 中任务主线程  ， 而then中任务是放在异步队列中的，执行在主线程之后 
3. Promise对象的api
  then(callback)
  catch(cb)  

4. all    race
  all([value1,value2])
    指的是将数组中所有的任务执行完成之后， 才执行.then 中的任务
  race表示赛跑， 谁快， 谁输出

项目中使用： 
  需求： 先获取数据，然后将获取的数据赋值给某一个变量

     const request = require('request')

 const obj = {
 data: null
}
     const p3 = new Promise((resolve,reject)=>{
       request('http://api.douban.com/v2/movie/in_theaters',(err,res,data)=>{
         resolve(data)
       })
     }).then((data)=>{
       // console.log( data )
       obj.data = data
     }).then(()=>console.log(obj.data))



   const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
   resolve(console.log('p1 任务1'))
   },1000)
   })
 .then( data => {
   console.log('p1 任务2')
 })
 .then( res => {
   console.log('p1 任务3')
 })
 .catch( err =>{ throw err} )



   const p2 = new Promise((resolve,reject)=>{
   resolve(console.log('p2 任务1'))
   }).then(
   data => {
   console.log('p2 任务2')
   }
   ).catch(
   err => {
    throw err 
   }
   )


  Promise.all([p1,p2])
  .then(()=>console.log('done'))


 Promise.race([p1,p2])
 .then(()=>{console.log('done~~')})

gengerator函数

es6 提供的 generator函数
1. 在function关键字后加一个* ， 那么这个函数就称之为generator函数
2. 函数体有关键字 yield ， 后面跟每一个任务 ， 也可以有return关键字， 保留一个数据
3. 通过next函数调用， 几个调用， 就是几个人任务执行

  function* g1(){
  yield '任务1'
  yield '任务2'
  yield '任务3'
  return '任务4'
  }

  const g1done = g1()

  console.log(g1done.next())
  console.log(g1done.next())

async await

1. es7新增的 async函数
2. 格式

    async function aa(){
      await '任务1'
      await '任务2'
    }

  问题： readFile('./01-Promise.js') 运行结果是Promise, 但是我们使用 async await之后， 它的结果是具体的数据了？

  分析： async函数使用了generator函数的语法糖  ， 它直接生成对象  {value: '',done:false}    await 直接将value提取出来了

  实现： 将三层函数嵌套的第三层中的返回值返回来


  扩展： 
    多层函数嵌套（异步执行） ， 我们想把里层函数，一般情况出现在数据请求，我们将请求得到的数据返回出来

    解决： Promise + async

   const fs = require('fs')

   const readFile = (filename) =>{
  return new Promise((resolve,reject)=>{
    fs.readFile(filename,(err,data)=>{
      resolve(data.toString())
       })
     })
    }


     const asyncFn = async() => {
     const f1 = await readFile('./01-Promise.js') // {value: '', done: false}

     const f1 =  readFile('./01-Promise.js').then(data=>data)

     const f2 = await readFile('./02-generator.js')
     console.log( f1 )
     console.log( f2 )
    }

    asyncFn()

• node.js nextTick setImmidate

nextTick vs setImmediate

轮询：
nodejs中是事件驱动的，有一个循环线程一直从事件队列中取任务执行或者
I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

2.setImmediate()的使用
即时计时器立即执行工作，它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。
3.Process.nextTick()的使用
它和setImmediate()执行的顺序不一样，它是在事件轮询之前执行，为了防止I/O饥饿，所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。
总结：
1. nextTick()的回调函数执行的优先级要高于setImmediate();

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

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

  const process = require('process')

  process.nextTick(()=>{
  console.log('A')
  process.nextTick(()=>{
    console.log('E')
  })
  setImmediate(()=>{
    console.log('F')
  })
  })
  process.nextTick(()=>{
    console.log('B')
  process.nextTick(()=>{
    console.log('G')
  })
  setImmediate(()=>{
    console.log('H')
    })
  })

  setImmediate(()=>{
    console.log('c')
  })

  process.nextTick(()=>{
  console.log('D')
  })

  console.log('主线程')

第三方库 async.js

/*
async总结：
1. 第三方的封装库
2. 暴露了一个 async对象 ， 这个对象身上有很多的api
3. api (多任务执行)
parallel
series
举例：

        async.parallel([
          function(callback){
            callback(null,'任务1')
          },
          function(callback){
            callback(null,'任务2')
          },
        ],(err,data)=>{
          console.log('data',data)
        })

除了npm之外的一个包管理器 yarn
yarn add —> npm i / npm install
yarn remove —> npm uninstall
yarn add jquery global ----> npm i jquery -g
yarn add jquery -----> npm i jquery -S || npm i jquery --save
yarn add jquery -D -----> npm i jquery -D || npm i jquery --save-dev

  const async = require('async')
  const fs = require('fs')

   console.log( async )


  async.map(['./01-Promise.js','./02-generator.js'],fs.stat,(err,result)=>{
  if(!err){
    console.log( result )
  }else{
    throw err
  }
  }) 


/* async.series([
  function(callback){
    callback(null,'任务1')
  },
  function(callback){
    callback(null,'任务2')
  }
],(err,data)=>{
    console.log('data',data)
}) */


async.parallel([
  function(callback){
    callback(null,'任务1')
  },
  function(callback){
    callback(null,'任务2')
  },
],(err,data)=>{
  console.log('data',data)
})