深入理解 async 和 await:异步编程的利器-CSDN博客

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

async 和 await 是 JavaScript 中用于处理异步操作的关键字，它们使得异步代码看起来更像同步代码，从而提高了代码的可读性和可维护性。

一、基本概念

async 函数

async 函数是一个返回 Promise 对象的函数。
在 async 函数内部，可以使用 await 关键字来等待一个 Promise 对象的结果。

await 关键字

await 只能在 async 函数内部使用。
await 关键字会暂停当前的 async 函数的执行，直到等待的 Promise 对象被解决（resolved）或拒绝（rejected）。
await 返回的是 Promise 对象解决后的结果。

示例代码

// 定义一个返回 Promise 的函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// async 函数
async function asyncFunction() {
  console.log('Start');
  await delay(1000); // 等待 1 秒
  console.log('End');
}

asyncFunction();

在上述示例中，asyncFunction 是一个 async 函数，它使用 await 关键字等待 delay 函数返回的 Promise 对象被解决。

二、错误处理

在 async 函数中，可以使用 try...catch 语句来捕获和处理异步操作中的错误。

示例代码

async function asyncFunction() {
  try {
    const result = await someAsyncOperation();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

在上述示例中，someAsyncOperation 是一个返回 Promise 对象的异步操作。如果该操作被拒绝，catch 块会捕获到错误并进行处理。

三、并行执行

虽然 await 关键字会暂停当前的 async 函数的执行，但可以使用 Promise.all 来并行执行多个异步操作。

示例代码

async function asyncFunction() {
  const [result1, result2] = await Promise.all([
    someAsyncOperation1(),
    someAsyncOperation2()
  ]);
  console.log(result1, result2);
}