JavaScript异步编程实例：Promise与async/await处理API请求

作者：半夏

时间：2026-10-30

本文通过完整代码实例与执行机制图解，系统讲解如何使用原生Promise与async/await处理网络API请求、组织串并行依赖并建立稳健的异常处理机制。

文章目录

在前端与Node.js开发中，处理HTTP API请求是程序与外部服务交换数据的核心通路。本文直接通过真实可运行的代码示例，梳理从底层事件循环模型到Promise链式调用，再到现代async/await异步语法的具体实现方式，帮助开发者彻底理清API状态流转、并发请求编排以及严谨的异常处理边界。

一、异步网络请求与浏览器执行机制

JavaScript运行环境是单线程的，意味着同一时刻调用栈（Call Stack）只能执行一段同步代码。发起HTTP网络请求需要经历DNS解析、TCP握手、服务端响应生成以及网络传输等环节，耗时通常在数十到数百毫秒甚至更久。如果采用同步阻塞方式执行，整个网页渲染与交互逻辑都将被彻底冻结。

为了解决这一问题，现代浏览器和Node.js依托Web APIs（或宿主底层I/O线程池）与事件循环（Event Loop）机制。当调用fetch()函数时，主线程立刻创建Promise对象并派发底层网络任务，主线程随即继续执行后续代码。待网络数据返回且响应状态敲定时，回调任务被推入微任务队列（Microtask Queue），待调用栈清空后由事件循环取出执行。

JavaScript异步编程实例：Promise与async/await处理API请求 — 图1：JavaScript通过微任务队列驱动网络响应回调的执行过程

二、使用Promise链式调用处理API请求

Promise是ECMAScript 6引入的标准异步编程容器，代表一个在当前不可用、但在未来某一时刻会完成或失败的值。一个Promise必定处于以下三种状态之一：

Pending（待定）：初始状态，既没有被兑现，也没有被拒绝。
Fulfilled（已兑现）：操作成功完成，返回预期的结果值。
Rejected（已拒绝）：操作遭遇错误，返回失败的原因（Reason）。

在使用fetch()发起网络请求时，fetch()立即返回一个处于Pending状态的Promise。当服务器响应头（Headers）到达后，该Promise转为Fulfilled状态，传递一个Response对象。为了获得真正的JSON业务数据，需要调用response.json()，该方法同样返回一个Promise，形成多级链式调用。

关键易错点：fetch()在遇到HTTP 404（资源不存在）或500（服务器故障）状态码时，并不会自动触发Promise的reject！只有在发生不可恢复的底层网络中断、DNS查找失败或CORS跨域阻止时才会reject。因此，必须在链中手动检查response.ok属性。

// 实例：使用Promise链式调用获取用户列表数据
function fetchUserList(apiUrl) {
  // 1. 发起请求，返回第一个Promise
  fetch(apiUrl)
    .then(response => {
      // 2. 手动校验HTTP状态码（200-299返回true）
      if (!response.ok) {
        throw new Error(`HTTP请求失败，状态码: ${response.status}`);
      }
      // 3. 返回流式JSON解析Promise
      return response.json();
    })
    .then(userData => {
      // 4. 处理最终解析完成的数据
      console.log('获取数据成功:', userData);
      renderUserList(userData);
    })
    .catch(error => {
      // 5. 统一捕获网络异常与手动throw的业务异常
      console.error('API请求异常:', error.message);
      showErrorMessage(error.message);
    })
    .finally(() => {
      // 6. 无论成功或失败均执行清理逻辑
      hideLoadingSpinner();
    });
}

三、使用async/await重构API请求与控制流

Promise虽然消除了传统回调地狱（Callback Hell），但多层.then()链式结构在变量作用域共享、条件分支和多步组合时依然较为繁琐。ES2017引入的async/await是基于Promise之上的语法糖，允许开发者使用同步风格的代码书写异步逻辑。

使用async/await时需遵循两条基本原则：

await关键字只能在被async修饰的函数内部或ES模块顶层使用。
await后跟一个Promise对象；它会暂停当前async函数的执行，等待Promise决议（Resolve），并提取其返回值，而不会阻塞主线程的其他任务。

// 实例：使用 async/await 与 try...catch 实现标准API请求封装
async function fetchUserProfile(userId) {
  const url = `https://api.example.com/users/${userId}`;

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`服务器返回错误: ${response.status}`);
    }

    const userData = await response.json();
    return userData;
  } catch (error) {
    // 捕获所有同步抛错、网络中断以及非2xx触发的错误
    console.error(`加载用户 [${userId}] 失败:`, error.message);
    throw error; // 向外层调用栈透传，便于外层决定是否重试或展示弹窗
  }
}

四、请求依赖编排：串行依赖 vs 并发并行

在实际业务中，经常需要请求多个接口。如何组织请求顺序直接决定了页面的加载性能与用户体验。通常存在两种场景：

串行依赖（Sequential）：第二个请求的入参依赖于第一个请求的返回结果。必须等待前一步执行完成，才能发起下一步。
并发并行（Parallel）：多个请求之间互不依赖（例如同时请求用户信息、系统配置、未读通知数）。应当同时发起并在全部完成后统一交付，避免无谓的串行等待。

// 场景A：串行请求（获取用户详情 -> 依据用户权限ID获取菜单）
async function loadUserMenu(userId) {
  const user = await fetchUserProfile(userId);
  // 后续请求必须依赖 user.roleId
  const menuResponse = await fetch(`https://api.example.com/roles/${user.roleId}/menus`);
  return await menuResponse.json();
}

// 场景B：并发请求（使用 Promise.all 并行发出多个无关联请求）
async function loadDashboardData(userId) {
  try {
    // 同时发出3个网络请求，并行执行
    const [profileRes, statsRes, noticeRes] = await Promise.all([
      fetch(`https://api.example.com/users/${userId}`),
      fetch(`https://api.example.com/users/${userId}/stats`),
      fetch(`https://api.example.com/notices/latest`)
    ]);

    // 校验每个响应的HTTP状态
    if (!profileRes.ok || !statsRes.ok || !noticeRes.ok) {
      throw new Error('部分模块数据加载失败');
    }

    // 并行解析JSON响应体
    const [profile, stats, notices] = await Promise.all([
      profileRes.json(),
      statsRes.json(),
      noticeRes.json()
    ]);

    return { profile, stats, notices };
  } catch (error) {
    console.error('看板初始化失败:', error);
    throw error;
  }
}

五、生产环境实战：超时熔断与取消请求

在网络状况不稳定或服务端高负载时，API请求可能会长时间无响应。原生fetch()本身默认没有超时设置。如果不加控制，挂起的请求将持续占用连接资源。

标准解决方案是使用DOM规范提供的AbortController，通过向fetch()传递signal信号，并配合setTimeout()实现超时自动取消：

// 实例：具备超时中断机制的通用 fetch 封装
async function fetchWithTimeout(resource, options = {}) {
  const { timeout = 5000, ...restOptions } = options;
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(resource, {
      ...restOptions,
      signal: controller.signal
    });

    if (!response.ok) {
      throw new Error(`服务响应异常: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error(`请求超时，超过 ${timeout}ms 未响应`);
    }
    throw error;
  } finally {
    clearTimeout(id); // 请求成功或遭遇其他错误时清除定时器
  }
}