JavaScript 实战教程中流程控制怎么在异步逻辑中控制流向-js教程-PHP中文网

JavaScript异步流程控制核心是明确任务依赖、统一错误出口、避免状态失控：Promise链用于串行依赖，Promise.all/allSettled/race处理并行或竞态，async/await提升条件与循环可读性，并需注意微任务与宏任务执行顺序差异。

javascript 实战教程中流程控制怎么在异步逻辑中控制流向

在 JavaScript 异步逻辑中控制流程走向，核心是**明确任务依赖关系、统一错误出口、避免状态失控**。不是靠写得“快”，而是靠设计得“稳”——尤其当多个请求有先后、并行或条件分支时。

用 Promise 链精准串联有依赖的步骤

当后一步必须等前一步结果才能发起（比如先登录 → 拿 token → 请求用户数据），Promise 链是最直接、最不易出错的方式：

每个 .then() 返回新 Promise，自然形成串行流；
中间任何一步 reject，会跳过后续 then，直达最近的 .catch()；
避免在 then 里嵌套 fetch 或 setTimeout，否则容易漏掉错误捕获。

示例：

fetch('/login', { method: 'POST' })
  .then(res => res.json())
  .then(data => fetch('/user', {
    headers: { 'Authorization': `Bearer ${data.token}` }
  }))
  .then(res => res.json())
  .then(user => console.log('欢迎', user.name))
  .catch(err => console.error('任一环节失败:', err));

用 Promise.all 或 Promise.race 处理并行或竞态场景

多个请求互不依赖，但需全部完成再汇总处理 → 用 Promise.all；只要一个成功就可继续 → 用 Promise.race：

Promise.all([])：全部 resolve 才进入 then，任一 reject 就进 catch；
Promise.allSettled([])：不管成功失败都等所有结束，返回每个结果的状态对象；
Promise.race([])：谁先 settle（fulfill 或 reject）谁决定结果，适合加超时控制。

加超时的常见写法：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

const timeout = () => new Promise((_, reject) =>
  setTimeout(() => reject(new Error('请求超时')), 5000)
);

Promise.race([
  fetch('/api/data'),
  timeout()
])
  .then(res => res.json())
  .catch(err => console.error(err.message));

用 async/await 让条件分支和循环更清晰

涉及 if/else、for 循环、重试逻辑时，async/await 的同步式写法比纯 Promise 链更易读、更易调试：

await 只能在 async 函数内用，但它让“等待”语义显性化；
try/catch 可捕获整个块内的 Promise reject，包括 await 后面的任意异步操作；
循环中逐个 await 是串行，用 map + Promise.all 是并行。

示例（带重试的请求）：

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i     try {
      const res = await fetch(url);
      if (res.ok) return res.json();
    } catch (err) {
      if (i === maxRetries) throw err;
    }
    await new Promise(r => setTimeout(r, 1000 * (2 ** i))); // 指数退避
  }
}