当前位置：首页 > news >正文

红宝书第十八讲：详解JavaScript的async/await与错误处理

news 来源：原创 2025/5/11 8:16:48

红宝书第十八讲：详解JavaScript的async/await与错误处理

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、async/await的作用：让异步代码“看起来”同步

async/await 是Promise的语法糖，可以让异步代码像同步代码一样直白。核心规则：

async：声明一个函数是异步的，函数内可用await
await：等待一个Promise完成，并返回其结果 ¹²

示例：对比Promise与async/await

// Promise链式调用
function fetchDataPromise() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('请求失败:', error));
}

// async/await改写 → 更像同步代码
async function fetchDataAsync() {
  try {
    const response = await fetch('/api/data'); // 等待fetch完成
    const data = await response.json(); // 等待JSON解析
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error); // 集中错误处理
  }
}

¹: 资料1指出async函数需用await等待异步操作
²: 资料3展示await等待Promise的结果并继续执行

二、错误处理：用try/catch捕获异步错误

调用async函数返回的是Promise，可以通过两种方式处理错误：

内部try/catch：直接在async函数内捕获异常
外部.catch()：像普通Promise一样链式处理

示例1：内部try/catch

async function loadData() {
  try {
    const data = await fetchApi(); // 假设fetchApi返回Promise
    return processData(data);
  } catch (error) {
    console.error('加载失败:', error);
    return null; // 返回兜底值
  }
}

示例2：外部.catch()（适合链式调用）

loadData()
  .then(result => console.log('结果:', result))
  .catch(error => console.error('外部捕获:', error));

³: 资料5显示，若async函数内抛出错误会被catch()捕获

三、执行流程解析

async/await流程图

遇到await → 暂停执行，交出线程控制权
Promise完成后 → 恢复执行后续代码
若Promise被拒绝 → 触发catch或try/catch块

在这里插入图片描述

四、重点注意事项

await只能在async函数内使用

// 错误示例！
function normalFunc() {
  const data = await fetchData(); // 报错：await需在async函数中
}

async函数返回的是一个Promise

async function foo() { return 5; }
foo().then(value => console.log(value)); // 输出5

错误需要主动捕获，否则可能导致未处理的Promise拒绝

async function riskyTask() {
  throw new Error('危险操作');
}
// 正确做法：用try/catch或.catch()
riskyTask().catch(e => console.log('错误已处理:', e));

³: 资料5强调未捕获的异步错误会导致Uncaught Promise Rejection

五、综合应用：并行请求与错误隔离

async function fetchMultipleData() {
  try {
    // 同时发起多个请求（并行）
    const [user, posts] = await Promise.all([
      fetch('/api/user'),
      fetch('/api/posts')
    ]);

    // 处理结果
    const userData = await user.json();
    const postsData = await posts.json();
    return { userData, postsData };
  } catch (error) {
    console.error('有请求失败:', error);
    throw error; // 可选择重新抛出错误供外部处理
  }
}

// 调用
fetchMultipleData()
  .then(data => console.log('全部成功:', data))
  .catch(() => console.log('外部处理失败'));