JavaScript 中 fetch 怎么配合 async 优雅实现串行请求-js教程-PHP中文网

用 async/await 配合 fetch 实现串行请求的核心是依次 await 每个 fetch 及其响应解析，确保前序完成后再发起后续请求，从而避免竞态、保证顺序、提升可读性与错误可控性。

javascript 中 fetch 怎么配合 async 优雅实现串行请求

用 async/await 配合 fetch 实现串行请求，核心是让每个请求等待前一个完成后再发起，避免竞态、保证顺序，同时保持代码可读和错误可控。

用 await 逐个等待 fetch 调用

这是最直接、最清晰的方式：把多个 fetch 写在 async 函数里，用 await 依次执行。每个请求天然阻塞后续逻辑，自然形成串行。

示例：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

async function fetchInSeries() {
  try {
    const res1 = await fetch('/api/user');
    const user = await res1.json();

    const res2 = await fetch(`/api/posts?userId=${user.id}`);
    const posts = await res2.json();

    const res3 = await fetch(`/api/stats?postId=${posts[0]?.id}`);
    const stats = await res3.json();

    return { user, posts, stats };
  } catch (err) {
    console.error('请求链失败：', err);
    throw err;
  }
}

✅ 优点：逻辑线性、调试友好、错误定位明确。
⚠️ 注意：没有并发，适合强依赖场景（如后一个 URL 需前一个响应里的 ID）。

封装通用串行工具函数

如果多个地方需要串行调用，可抽象为一个接收 fetch 函数数组的工具：

async function series(fetchFns) {
  const results = [];
  for (const fn of fetchFns) {
    const res = await fn();
    results.push(await res.json());
  }
  return results;
}

// 使用
series([
  () => fetch('/api/a'),
  () => fetch('/api/b'),
  () => fetch('/api/c')
]).then(data => console.log(data));

? 提示：传入的是函数而非直接调用，确保按需执行；也可扩展支持自定义解析逻辑（如 text()、arrayBuffer()）。

处理部分失败但继续后续请求（可选策略）

有时希望即使某步失败也不中断整个流程（比如日志上报不关键），可用 catch 局部捕获：

async function fetchWithGrace() {
  const user = await (await fetch('/api/user')).json();

  let posts = null;
  try {
    posts = await (await fetch(`/api/posts?uid=${user.id}`)).json();
  } catch (e) {
    console.warn('获取 posts 失败，跳过', e);
  }

  let stats = null;
  try {
    stats = await (await fetch(`/api/stats`)).json();
  } catch (e) {
    console.warn('获取 stats 失败，跳过', e);
  }

  return { user, posts, stats };
}

避免常见陷阱

不要忘记 await 响应体方法：fetch 返回的是 Response 对象，.json()、.text() 等也是 Promise，必须 await，否则得到的是 pending Promise。
不要在循环中无 await 地调用 fetch：写成 fetch(...).then(...) 会并发，不是串行。
超时控制需手动加：fetch 本身不支持 timeout，可用 AbortController 或包装 Promise.race。
错误要主动抛出或处理：fetch 只在网络错误时 reject，HTTP 4xx/5xx 仍 resolve，需检查 res.ok。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南