深入理解JavaScript中的async/await-CSDN博客

本文链接：https://blog.csdn.net/weixin_74183307/article/details/148293536

深入理解JavaScript中的async/await：

一、异步编程的演进：为什么需要async/await

在JavaScript的世界里，异步编程一直是核心难题。早期的回调函数导致"回调地狱"，Promise的出现解决了嵌套回调的问题，但链式调用.then()仍让代码显得繁琐。async/await的诞生，正是为了用同步代码的书写风格处理异步操作，让异步编程更直观、更易读。

// Promise链式调用示例
fetchData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error));
  
// async/await改写后
async function processDataFlow() {
  try {
    const data = await fetchData();
    const processed = await processData(data);
    const result = await displayResult(processed);
    return result;
  } catch (error) {
    handleError(error);
  }
}

二、async函数：隐式返回Promise的异步容器

1. async函数的基本定义

async关键字用于声明一个异步函数，其核心特性是隐式返回Promise对象。无论函数内部是否显式返回值，async函数的调用都会返回一个Promise实例。

// 基础async函数
async function fetchUser() {
  return { name: "豆包", age: 18 };
}

// 调用async函数会返回Promise
const userPromise = fetchUser();
console.log(userPromise instanceof Promise); // true

// 通过then获取结果
userPromise.then(user => console.log(user.name)); // "豆包"

2. async函数的返回值与Promise状态

若函数正常返回值，Promise会被resolve，值为返回值
若函数抛出异常，Promise会被reject，值为异常对象

// 正常返回
async function successDemo() {
  return "操作成功";
}

// 抛出异常
async function errorDemo() {
  throw new Error("操作失败");
}

// 观察Promise状态
successDemo().then(console.log); // "操作成功"
errorDemo().catch(err => console.error(err.message)); // "操作失败"

3. async函数的执行时机

async函数的执行不会阻塞主线程，其内部代码会立即执行，但返回的Promise的回调会进入微任务队列。

async function asyncDemo() {
  console.log("async函数开始执行");
  return "执行完毕";
}

console.log("主线程开始");
asyncDemo().then(result => console.log(result));
console.log("主线程结束");

// 输出顺序：
// 主线程开始
// async函数开始执行
// 主线程结束
// 执行完毕（20ms后，微任务队列处理）

三、await关键字：异步操作的"暂停-恢复"控制器

1. await的核心作用

await只能出现在async函数中，用于暂停函数执行，直到等待的Promise状态改变或非Promise值准备就绪。

// 等待Promise对象
async function waitForPromise() {
  console.log("开始等待");
  const result = await new Promise(resolve => {
    setTimeout(() => resolve("等待完成"), 1000);
  });
  console.log(result); // 1秒后输出
  console.log("继续执行");
}

waitForPromise();
console.log("函数外代码执行");

// 输出顺序：
// 开始等待
// 函数外代码执行
// 等待完成（1秒后）
// 继续执行（1秒后）

2. await对非Promise值的处理

若await后接非Promise值，JS引擎会将其包装为已resolve的Promise：

async function processValue() {
  console.log(await 100);       // 直接输出100
  console.log(await "字符串");   // 直接输出"字符串"
  console.log(await true);       // 直接输出true
}

processValue();

3. await与Event Loop的关系

await会暂停async函数的执行，但不会阻塞主线程。等待期间，主线程会继续执行其他任务，待Promise状态改变后，通过微任务恢复async函数的执行。

async function eventLoopDemo() {
  console.log("1. 进入async函数");
  await new Promise(resolve => {
    console.log("2. 创建Promise");
    resolve();
    console.log("3. Promise已resolve");
  });
  console.log("4. await之后的代码");
}

console.log("0. 主线程开始");
eventLoopDemo();
console.log("5. async函数调用完毕");

// 输出顺序：
// 0. 主线程开始
// 1. 进入async函数
// 2. 创建Promise
// 3. Promise已resolve
// 5. async函数调用完毕
// 4. await之后的代码（微任务队列执行）

四、实战应用：async/await的典型场景

1. 顺序执行多个异步操作

// 模拟异步请求
function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve({ id, name: `用户${id}` }), 500);
  });
}

function fetchOrders(userId) {
  return new Promise(resolve => {
    setTimeout(() => resolve([`订单${userId}001`, `订单${userId}002`]), 300);
  });
}

// 顺序执行异步操作
async function getUserOrders() {
  console.time("总耗时");
  const user = await fetchUser(1);
  const orders = await fetchOrders(user.id);
  console.log(`${user.name}的订单：${orders}`);
  console.timeEnd("总耗时"); // 约800ms（500+300）
}

getUserOrders();

2. 并行执行多个异步操作

// 并行执行优化
async function getUserOrdersParallel() {
  console.time("并行耗时");
  const [user, orders] = await Promise.all([
    fetchUser(1),
    fetchOrders(1)
  ]);
  console.log(`${user.name}的订单：${orders}`);
  console.timeEnd("并行耗时"); // 约500ms（取最长耗时）
}

getUserOrdersParallel();

3. 错误处理最佳实践

// 推荐的错误处理方式
async function safeFetch() {
  try {
    // 可能失败的异步操作
    const data = await fetchData();
    return processData(data);
  } catch (error) {
    console.error("操作失败:", error);
    return null; // 或抛出特定错误
  }
}

// 不推荐的写法（无法捕获await后的错误）
async function badPractice() {
  const data = await fetchData(); // 若fetchData失败，会跳过后续try-catch
  try {
    return processData(data);
  } catch (error) {
    console.error("处理失败:", error);
  }
}

五、async/await与Promise的对比与选择

场景	Promise优势	async/await优势
简单异步操作	`.then().catch()`链式调用更简洁	代码结构更接近同步，可读性更高
复杂异步流程	嵌套逻辑难以维护	顺序执行清晰，避免回调地狱
并行操作	`Promise.all()`直接处理数组	需要手动包裹`Promise.all()`
错误处理	链式catch统一处理	try-catch更符合同步编程习惯

// 场景对比：获取多个用户数据

// Promise方式
Promise.all([
  fetchUser(1),
  fetchUser(2),
  fetchUser(3)
])
.then(users => users.filter(user => user.age > 18))
.then(validUsers => console.log(validUsers))
.catch(error => console.error(error));

// async/await方式
async function processUsers() {
  try {
    const [user1, user2, user3] = await Promise.all([
      fetchUser(1),
      fetchUser(2),
      fetchUser(3)
    ]);
    const validUsers = user1.filter(user => user.age > 18);
    console.log(validUsers);
  } catch (error) {
    console.error(error);
  }
}

六、关键注意事项

await必须在async函数中：单独使用await会报错，必须存在于async函数内部
错误传播机制：await后的Promise拒绝会抛出异常，需用try-catch捕获
并行操作的重要性：多个无关的异步操作应使用Promise.all()并行执行，避免串行耗时
非阻塞特性：await暂停的是函数内部代码，主线程仍可处理其他任务
微任务队列影响：await后的代码会作为微任务执行，影响Event Loop顺序

七、总结

Promise 的不足与 async/await 的优势：Promise 虽然解决了回调地狱，但代码中 .then 方法过多，语义不够清晰。async/await 则实现了用同步代码风格编写异步代码，基于生成器和 Promise 技术，使代码更加简洁易读。
async 函数：是异步执行并隐式返回 Promise 的函数，Promise 对象的结果由 async 函数的返回值决定。
await 表达式：正常情况下，await 右侧一般为 Promise 对象，也可以是其他值。如果是 Promise 对象，它会阻塞函数后续代码，等待 Promise 被 resolve 或 reject，并将结果作为 await 表达式的运算结果；如果是其他值，V8 会将其包装成已 resolve 的 Promise 对象。
注意事项：
- await 必须写在 async 函数中，但 async 函数中可以没有 await。
- 如果 await 的 Promise 失败了，会抛出异常，需要通过 try...catch 来捕获处理。