async/await

async 函数

ES7 标准引入了 async 函数,使得异步操作变得更加方便。

它是 Generator 函数的语法糖。

与generator与co的不同

  • 内置执行器
  • 更好的语义
  • co yield后面只能是promise或thunk函数,而async函数 的 await命令后面可以是原始类型的值(会自动转化为resolve的promise对象)

1. 返回promise对象

使用async命令的函数,可以返回一个promise对象

async function es6() { 

}
es6().then(data=> { 

})

async 的内部机制我猜是这样的

function async(fn) { 
  return new Promise(resolve=> { 
    resolve(fn())
  })
}

2. 错误处理

很多人不知道async函数里面的错误处理,因为没有reject,其实直接抛出异常就可以了

async function es6() {
    throw new Error('出错了')
}
es6().catch(err => {
    console.log(err)
}).finally(() => {
    console.log("错误被捕获了")
})

3. then的执行时机

我们都知道,async的then是等到它里面的await全部执行完才执行

async function es6() {
    let res1 = await api1()
  let res2 = await api2()
  return { res1,res2 }
}
es6().then(({res1,res2})=> { 
  console.log(res1,res2)
})

4. await

await 后面可以跟一个promise对象,返回resolve的结果,也可以是基本类型,直接返回

async function es6() { 
  return await 123;
}

错误处理

async function es6() { 
  return await Promise.reject('出错了').catch(e=> {console.log(e)});
}

5. async是如何编译成generator的 ?

首先,我不需要知道他是如何编译成generator的,我只需要知道generator编译成promise的过程就可以了

所以殊途同归,我只需要知道它是如何编译成promise就可以了.

async function es() { 
  // 第1段 start 
  const res1 = await api()  // 第1段 end 
  // 第2段 start 
  console.log(res)
  const res2 = await api()  // 第2段 end 
  // 第3段 start
  console.log(res2)         // 第3段 end 
}

编译成promise

function es() { 
  new Promise(function excutor(resolve,reject){
    const promise1 = api()
    promise1.then(value=> { 
      const res1 = value 
      console.log(res)

      const promise2 = api() 
      promise2.then(value=> { 
        const res2 = value 
        console.log(res2)
        const { value, done } = return 
        because done === true resolve(value)
      },reject)
    },reject)
  })
}

再来看,普通函数

async function es6() { 
  return { value:222333 }
}
function es6() { 
  new Promise(function excutor(resolve,reject){
  const { done,value } = return {value : 222333}
    because done === true ; resolve(value)
  })
}

你可能感兴趣的:(async/await)