欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES8 Async 和 Await

程序员文章站 2022-04-14 16:11:12
Async 和 Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作 一、Async Async 自动将常规函数转换成 Promise,返回值一个 Promise 对 ......

async 和 awaiit 是 promise 的扩展,我们知道 javascript 是单线程的,使用 promise 之后可以使异步操作的书写更简洁,而 async 使 promise 像同步操作

 

一、async

async 自动将常规函数转换成 promise,返回值一个 promise 对象,使用 async 的效果:

async function f() {
  return 123
}
console.log(f()) // promise 对象
async function f() {
  return 123
}
f().then(console.log) // 123

可以看出,f() 的返回值有 then 方法(在 javascript 中只有原生 promise 对象拥有 then 方法)

console.log(f() instanceof promise) // true

通过验证,我们知道想获得一个 promise 对象,可以不用再使用 new promise 了,可以用 async 来实现

另外,async 函数显示返回的结果如果不是 promise,会自动包装成 promise 对象,也就是说上面的代码等同于:

async function f() {
  return promise.resolve(123)
}

 

二、await

await 放置在 promise 调用之前,强制后面的代码等待,直到 promise 对象 resolve,得到 resolve 的值作为 await 表达式的运算结果

未使用 await 的效果:

async function f() {
  let promise = new promise((resolve) => {
    settimeout(() => resolve(123), 1000)
  })
  console.log(promise.then(val => console.log(val)))
  console.log(456)
}

f()

输出:

ES8 Async 和 Await

 

使用 await 的效果:

async function f() {
  let promise = new promise((resolve) => {
    settimeout(() => resolve(123), 1000)
  })
  console.log(await promise)
  console.log(456)
}

f()

输出:

ES8 Async 和 Await

await 的字面意思为“等待”,它等什么呢?等的是 promise 的返回结果,上面这段代码由 async 开启一个 promise 对象,函数内部嵌套了一个 promise 操作,这个操作需要等待 1 秒才返回“123”的结果,也就是说 await 在拿到这个结果之前不会执行后面的代码,会一直等到拿到这个结果才往后继续执行

 

注意:

  • await 后面如果不是 promise 对象会自动包装成 promise 对象
  • await 只能在 async 函数内部使用,否则会报错