JavaScript异步编程实战指南

JavaScript异步编程绝非仅靠async/await就能轻松驾驭的“语法技巧”，而是必须深入理解Promise状态流转、手动错误处理机制与AbortController生命周期协同的核心能力；从fetch取消到回调API封装，从并发控制失序到静默错误吞没，无数线上问题都源于对底层机制的模糊认知——唯有亲手实践Promise构造、链式捕获、信号中断与清理时机，才能真正摆脱时序混乱、内存泄漏和调试黑洞，在真实项目中写出健壮、可维护的异步代码。

JavaScript 异步编程不是“选学”，而是日常开发绕不开的现实——fetch、setTimeout、事件监听、文件读取，全依赖它。不理解底层机制，靠堆 async/await 往往会掉进时序错乱、错误吞没、内存泄漏的坑里。

为什么 async/await 不能代替 Promise 理解

async/await 只是 Promise 的语法糖，不是新模型。一旦遇到并发控制、错误分支合并、或需要手动构造 Promise（比如封装 setTimeout），没有对 Promise 状态（pending/fulfilled/rejected）、链式调用、Promise.allSettled 等行为的清晰认知，代码就会失控。

• 写 await Promise.all([a(), b()]) 时，如果 a() 抛错，b() 就被中断——这不是你想要的“并行”，而是“短路”
• await 后面如果不是 Promise，会自动包装成 Promise.resolve(value)，但很多人误以为它能“等待任意函数”
• 忘记 try/catch 或漏写 .catch()，错误就静默消失，尤其在 setTimeout + async 组合里极难排查

Promise 构造器里哪些操作必须手动 reject

Promise 构造器只捕获同步抛出的错误；异步产生的异常（比如回调里的 throw）不会触发 reject，必须显式调用 reject()。

new Promise((resolve, reject) => {
  fs.readFile('file.txt', (err, data) => {
    if (err) reject(err); // ✅ 必须手动 reject
    else resolve(data);
  });
});

• Node.js 回调风格 API（如 fs.readFile、crypto.randomBytes）都需这样包裹
• 浏览器 XMLHttpRequest 的 onerror 也要对应 reject，不能只靠 onload 的 resolve
• 漏掉 reject 会导致 Promise 永远 pending，await 卡死，且无报错提示

用 AbortController 中断 fetch 请求的实际写法

fetch 默认不可取消，靠 AbortController 是唯一标准方案。但很多人只加了 signal，却忘了清理引用或重复 abort 导致报错。

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      throw err;
    }
  });

// ✅ 正确取消方式（比如用户离开页面前）
controller.abort();

• 每个请求必须创建独立的 AbortController 实例，复用会引发 AbortError: The operation was aborted
• controller.abort() 可以多次调用，安全；但 signal 被 abort 后再传给另一个 fetch 会立刻 reject
• React/Vue 中，务必在组件卸载/副作用清理时调用 abort()，否则可能触发已销毁组件的 setState

真正卡住人的，从来不是语法记不住，而是 Promise 状态流转时机、错误传播路径、以及 AbortController 和 Promise 生命周期是否对齐——这些细节不写几遍真实请求+取消+重试逻辑，很难有体感。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript异步编程实战指南》文章吧，也可关注golang学习网公众号了解相关技术文章。