异步流程 工具

前端异步流程工具

1.传统方案：

   1.回调函数
   2.事件

2.工具的方案：

   1.promise(es6提供)
   2.generator函数
   3.async await
   4.node.js nextTick       setImmidate
   5.第三方库 async.js

1.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 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))

2.generator函数（有点鸡肋）(此方法输出的结果是对象)

{value:'',done:false/ture})
  1.在function后面加* ，就是gennerrator函数
  2.函数里面有yield 后面跟任务，也可以有return关键字。保留一个数据
  3.通过next函数调用。几个调用。就是几个任务执行，

eg:
        function* g1(){
        yield '任务1'
        yield '任务2'
       yield '任务3'
       return '任务4'
     }
     const show=g1();
     show.next();
     show.next();
     show.next();
     

3.async (es7提供的规范)(就是gennerrator的语法糖，然后结果提取对象中的value,所以输出的不是对象了)！！！！！重点

1. es7新增的 async函数
2. 格式
  async function aa(){
    await '任务1'
    await '任务2'
  }

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

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

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


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

    解决： Promise + async

3.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()在每轮循环中执行链表中的一个回调函数.

4.第三方库 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