js【详解】async await

news2025/2/27 21:38:29

为什么要使用 async await

async await 实现了使用同步的语法实现异步，不再需要借助回调函数，让代码更加易于理解和维护。

(async function () {
    // await 必须放在 async 函数中
    try {
        // 加载第一张图片
        const img1 = await loadImg1()
        // 加载第二张图片
        const img2 = await loadImg2()
    } catch (err) {
        console.error(err)
    }
})()

async await 使用要点

await 只能在 async 函数中使用

async await 语法特点

async 函数返回的都是 Promise 对象（若 async 函数内返回的不是 Promise ，则会自动将其封装为 Promise 再返回）

async function fn1() {
    return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)

await 后跟 Promise 对象：会阻塞代码的运行，需等待 Promise 变为 resolved 状态返回结果后，才继续执行后续代码

(async function () {
    const p1 = new Promise(() => {}) 
    await p1 // p1 一直是一个 pending 状态的 Promise，代码将阻塞在这里，无限等待下去，后续的代码不会执行
    console.log('p1') // 此句不会执行
})()

await 后跟非 Promise 对象：会直接返回

(async function () {
    const res = await 100
    console.log(res) // 100
})()

await 相当于 Promise 的 then

(async function () {
    const p2 = Promise.resolve(100)
    const res = await p2 
    console.log(res) // 100
})()

(async function () {
    const res = await 100
    console.log(res) // 100
})()

(async function () {
    const p3 = Promise.reject('some err')
    const res = await p3 // p3 为rejected 状态的 Promise , 而 await 会一直等待 resolved 状态的 Promise，所以代码将阻塞在这里，无限等待下去，后续的代码不会执行
    console.log(res) // 不会执行
})()

使用 try…catch 捕获异常，相当于 Promise 里 catch （有利于代码的标准化，因为异常标准的捕获方式就是使用 try…catch ）

(async function () {
  const p4 = Promise.reject("some err");
  try {
    const res = await p4;
     console.log('await后的Promise执行成功后的返回值res:',res);
  } catch (err) {
    console.error('await后的Promise执行失败后的报错err:',err); 
  }
})();

在这里插入图片描述

async await 的本质

async await 只是语法糖，本质还是异步调用

await 之后的代码，都属于异步调用

下方代码的执行顺序，见代码注释的序号

async function async1 () {
  console.log('async1 start') //2
  await async2()
  console.log('async1 end') // 5 关键在这一步，它相当于放在 callback 中，最后执行
}

async function async2 () {
  console.log('async2')  //3
}

console.log('script start') // 1
async1()
console.log('script end') //4