前端异步流程——promise与gengerator和async的区别

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

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

总结：

async特点：

await只能放到async函数中
相比gengerator语义化更强
await后面可以是promise对象，也可以是数字，字符串等
async函数返回值是一个promise对象
只要await语句后面promise状态变成了reject，整个async函数会中断执行， 故一般使用try{}catch(e){}包裹