浅谈前端异步流程工具（涵盖所有主流方法）

promise（目前使用最广泛的）

1. 通过new Promise()

2. 参数是一个回调函数， 回调函数中有两个参数 （resolve reject）
   a. resolve也是一个函数， 函数中接收参数， 参数为任务
   b.resolve 中任务主线程 ， 而then中任务是放在异步队列中的，执行在主线程之后

3. Promise对象的api
   then(callback)
   catch(callback)

例子1：

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

例子2

const request = require('request')  //需要引入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))    //输出结果是从豆瓣API上获得的数据

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

重点：

这里特别强调promise.all()和promise.race()两种api，前者指的是将该参数数组里面的所有任务执行完毕，再执行then()的任务。相比较而言，race()的用法如同表面英文意思“赛跑”一样，谁跑得快就执行谁。

generator（不太推荐）

由 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()) 

//输出结果如下：
//{ value: '任务1', done: false }
{ value: '任务2', done: false }

async await (通常与promise同时配合使用）

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

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

nextTick vs setImmediate

1.nexTic的优先级是大于setImmediate的。

asyc第三方库

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