ES6 async 与 await 怎么使用(基础)

首先,这两个词语可以理解为修饰符。那么它们是什么关系?有什么作用?应该怎么样用?

asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。食用本篇文章之前建议先去看一下promise!

async

async修饰符是是使用async函数的声明修饰符。也就是说你在普通的函数前面加async关键字,就可以让这个函数的结果变成一个promise函数:

async function fn1() {}
const a = fn1()
console.log(a);

 a打印结果为:

await

await操作符用于等待一个Promise 对象。它只能在被async修饰的异步函数中使用,但是async函数中可以没有await关键字。通俗来讲就是跟这个单词一样,等待!当函数执行到这个地方的时候会被暂停掉,直到这个拿到这个返回值的时候,继续执行。

当await右侧为

  • promise时:返回结果为promise处理的结果;
  • promise时:将此值作为返回值。

应用实例

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('ok')
  }, 1000);
})

let p2 = new Promise((resolve, reject) => {
  reject('fail')
})

async function main() {
  //1.非promise
  let res1 = await 10
  console.log('res1:', res1);

  //2.promise对象,成功
  let res2 = await p1
  console.log('res2:', res2);

  //3.promise对象,失败(需要try catch 抛出异常)
  try {
    let res3 = await p2
    console.log('res3:', res3);
  } catch (e) {
    console.log('异常抛出:', e);
  }

}

main()

输出结果:

 但是如果在前面的promise函数处理过异常之后,就不用try...catch。因为这个时候是会拿到返回值的,如果没有return返回值即为undefined,有返回值即以返回值为准。

例如在p2处加上异常处理,且指定返回1(其余不变):

let p2 = new Promise((resolve, reject) => {
  reject('fail')
}).catch(() => {
   //未指定返回值为undefined
   return '1'

})

打印结果为:

你可能感兴趣的:(前端,javascript,es6)