javascript异步编程是什么概念？【教程】

紅蓮之龍 2026-01-16 00:00:00 次阅读

JavaScript异步编程是应对单线程阻塞的逻辑组织方式，依赖事件循环、宏任务与微任务队列协作；async/await是Promise语法糖，await仅暂停当前函数，不阻塞线程，错误需try/catch捕获，微任务总先于宏任务执行。

JavaScript 异步编程不是一种语法糖，也不是某个 API 的名字，而是一种**应对单线程阻塞问题的组织逻辑方式**：它让你在发起耗时操作（比如 fetch、setTimeout、fs.readFile）时不卡住主线程，让后续代码照常运行，等结果回来再处理。这背后没有魔法，只有事件循环（Event Loop）、宏任务与微任务队列的协作。理解它，是为了不被“为什么 console.log 顺序不对”这类问题反复绊倒。

async/await 看起来像同步，但本质仍是 Promise

写 async function 不等于把异步变同步；它只是 Promise 的语法糖，所有 await 后面的表达式都会被自动 Promise.resolve() 包裹：

async function foo() {
  return 42;
}
// 等价于：
function foo() {
  return Promise.resolve(42);
}

常见误区：

await 只暂停当前 async 函数的执行，不阻塞整个 JS 线程
没用 try/catch 包裹 await，错误会直接变成未捕获的 Promise rejection（控制台报错但不中断流程）
await 后跟普通值（如
await 123）是合法的，但毫无意义——它会立即 resolve

Promise.then() 和 await 执行时机不同，别混用链式和 await 风格

下面两段代码行为不同：

// ✅ 链式写法：.then() 是微任务，总在本轮事件循环末尾执行
Promise.resolve().then(() => console.log('A'));
console.log('B'); // 输出：B → A

// ✅ await 写法：await 后代码相当于放在 .then() 里
async function f() {
  await Promise.resolve();
  console.log('C');
}
f();
console.log('D'); // 输出：D → C

坑点：

在 for 循环里直接 await 某个 Promise，是串行等待；想并发请用 Promise.all([p1, p2])
用 .then().catch() 处理错误，和用 try/catch + await，对错误堆栈信息影响不同（后者更清晰）

回调函数还没淘汰，但别再写嵌套三层以上的 callback

浏览器原生 API（如 addEventListener、setTimeout）和部分 Node.js 旧 API（如 fs.readFile）仍以回调为主。你可以封装成 Promise：

const sleep = (ms) => new Promise(r => setTimeout(r, ms));
// 而不是：
setTimeout(() => {
  setTimeout(() => {
    setTimeout(() => console.log('done'), 1000);
  }, 1000);
}, 1000);

注意：