乐趣区

关于javascript:ES8一-asyncawait

jiezi

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) //40
console.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 学习幅员

退出移动版