ES8（2017） —— async&await

  • async和一般函数的区别
  • await
  • async和await必须配合应用

  • 对于await应用中谬误的解决

    • M1：try-catch
    • M2：.catch
    • M3：两个返回值（参考node）
  • ES6-ES10学习幅员

async和一般函数的区别

// 一般函数function fuc() {    return 27}console.log(fuc()); // 27//async函数async function firstAsync() {  return 27}console.log(firstAsync())// Promise {<resolved>: 27}// 返回了一个promise对象，将27返回到resolve外面// 相当于 -->async function firstAsync() {  return Promise.resolve(27)}firstAsync().then(val => {  console.log(val) // 27})console.log(firstAsync() instanceof Promise)// true 能够对async返回的对象进行判断

await

上面函数如何能够依照程序执行？

async function firstAsync() {  // 申明异步操作，执行结束之后能力执行上面的函数  let promise = new Promise((resolve,reject) => {    setTimeout(() => {      resolve('now it is done')    }, 1000)  })  // 执行异步操作  promise.then(val => {    console.log(val)  })    console.log(2)  return 3}firstAsync().then(val => {  console.log(val)})//2//3//now it is done

应用await

async function firstAsync() {  // 申明异步操作，执行结束之后能力执行上面的函数  let promise = new Promise((resolve,reject) => {    setTimeout(() => {      resolve('now it is done')    }, 1000)  })  // 执行异步操作  let result = await promise  console.log(result)    console.log(2)  return 3}firstAsync().then(val => {  console.log(val)})//now it is done//2//3

await promise 是一个表达式，前面必须要跟promise对象，如果不是会主动解决成promise对象

console.log(await promise) //now it is done  ---有返回值console.log(await 40) //40console.log(await promise.resolve(40)) //40

async和await必须配合应用

否则会报错

对于await应用中谬误的解决

如果不对await进行错误处理，则会阻断程序执行。

await应用中，如果promise对象返回resolve，则返回什么值就是什么值，包含undefined。

然而如果返回reject，则返回值返回undefined，从catch函数中能够接管到。

第一种解决办法：try-catch

  • 长处：简洁明了，所有报错都到catch外面解决，不须要对await返回值进行判断
  • 毛病：自身try-catch是解决同步报错的问题，如果await函数之后有报错，则无奈判断报错起源
// 定义一个函数，返回promise对象function firstAsync() {  return new Promise((resolve,reject) => {    const a = 0;    if(a){      resolve(1)    }else{      reject(2)    }  })}async function hello () {  // 判断是否有报错  try{    const res = await firstAsync()    console.log(res)  }catch(err){    console.log("err")    console.log(err)  }}

第二种解决办法：.catch

  • 长处：代码优雅，适宜对await函数进行异步错误处理
  • 毛病：须要对返回值再进行一次判断。
// 定义一个函数，返回promise对象function firstAsync() {  return new Promise((resolve,reject) => {    const a = 0;    if(a){      resolve(1)    }else{      reject(2)    }  })}async function hello () {  // 判断是否有报错  const res = await firstAsync().catch(err =>{    console.log("err")    console.log(err)  })  if(res){      //TODO  }}hello();

第三种解决办法，两个返回值

  • 长处：对立错误处理能够在定义的函数内执行，await调用只须要对返回值进行判断即可，不须要独自进行catch解决
  • 毛病：返回值是两个，不容易治理
const awaitWrap = () => {  let promise = new Promise((resolve,reject) => {    const a = 0;    if(a){      resolve(1)    }else{      reject(2)    }  })  return promise  .then(data => [data, null])  .catch(err => {    // 通用错误处理写这里 TODO    return [null,err]  })}async function he() {  const [data, err] = await awaitWrap();  if(data){    //如果是reslove走这里    console.log(data)  }else{    //如果是reject走这里    console.log("error")    console.log(err)    //非凡错误处理写这里 TODO  }}he();

ES6-ES10学习幅员