async await

Async基本用法

async就是Generator函数的语法糖。将一个函数加上async就表示这是一个异步函数,返回的结果是一个Promise。

  async function run() {
    return 'hello world'
  }
  run().then((res) => {
    console.log(res); // hello world
  })

函数内部抛出的错误会被catch方法捕获

  async function run() {
    throw Error('error')
  }
  run().catch((err) => {
    console.log(err); // Error: error
  })

Async特点一

当async函数执行的时候，遇到await就会执行await后面的代码，一般后面是一个Promise，会等到这个异步的状态改变才会继续执行函数后续的代码

  async function run() {
    console.log(new Date().getTime());
    let res = await timeout(2000, 'hello word')
    console.log(new Date().getTime());
    return res
  }
  function timeout(tiem, val) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(val)
      }, tiem)
    })
  }
  run().then((res) => {
    console.log(res); // Error: error
  })
  /*
  * 1697713077175
  * 1697713079187 两秒之后状态改变执行
  * hello word
  */ 

 Async特点二

async返回的异步结果，需要等到函数内所有await后面的异步状态改变完毕，返回。

  async function run() {
    let res = await timeout(2000, 'hello word')
    let res2 = await timeout(4000, '2023')
    return res + res2
  }
  function timeout(tiem, val) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(val)
      }, tiem)
    })
  }
  run().then((res) => {
    console.log(res); // hello word2023
  })

 Async特点三

async函数内任何一个Promise状态改变为reject都会阻断函数的执行

​
​
  async function run() {
    await Promise.reject('error')
    return await Promise.resolve('success')  // 不会执行
  }
  run().catch((res) => {
    console.log(res); // error
  })  
 
​
 
​

引用阮一峰老师的错误处理方式

 Async特点四

await只能出现再async函数内

function run() {
    await Promise.resolve('success')  Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules 
}

---

Async应用：异步循环

  async function run() {
    for (let i = 0; i <= 3; i++) {
      await timeout(1000, i) // await 阻断函数后续代码的执行，等待Promise状态并返回结果。不会将Promise加入到微任务
      console.log(i); // 每隔一秒后输出
    }
    console.log("执行后续代码"); // 4秒后输出
  }
  run()
  function timeout(tiem, val) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(val)
      }, tiem)
    })
  }

Await是不是一个微任务

在async函数中await关键字是用于等待一个Promise的状态。当async函数中遇到await会暂函数的执行，等待Promise的状态并返回结果。

当await一个Promise时并不会把Promise加入到微任务，而是等待Promise的状态，一旦得到Promise的状态就会返回结果，继续执行后续的代码。

总结起来await不是一个微任务，而是等待Promise状态的关键字。