JavaScript 同步与异步机制详解

console.log("1. 启动异步任务");
setTimeout(() => {
  console.log("3. 异步任务完成"); // 延迟 1 秒执行
}, 1000);
console.log("2. 继续执行后续代码"); // 不等待异步任务，立即执行
// 输出顺序：1 → 2 → 3

三、底层原理：JS 的异步执行机制

要彻底理解同步异步，必须搞懂调用栈（Call Stack）、任务队列（Task Queue）、事件循环（Event Loop） 这三大核心组件。

1. 核心组件分工

• 调用栈：负责执行同步代码，遵循'先进后出'原则。同步任务执行时入栈，执行完毕后出栈。
• 任务队列：存放异步任务的回调函数，分为'宏任务队列'和'微任务队列'（优先级：微任务 > 宏任务）。
  • 宏任务：setTimeout、setInterval、DOM 事件、AJAX 请求、script 标签执行。
  • 微任务：Promise.then/catch/finally、async/await、process.nextTick（Node.js，优先级最高）。
• 事件循环：持续监控调用栈和任务队列，当调用栈为空时，将任务队列中的回调函数压入调用栈执行。

2. 异步执行流程（关键！）

1. 执行同步代码，同步任务依次入栈、出栈。
2. 遇到异步任务时，启动异步操作（如定时器计时、网络请求），并将回调函数注册到对应任务队列。
3. 同步代码执行完毕（调用栈为空），事件循环开始工作。
4. 优先清空微任务队列：将微任务队列中所有回调函数依次压入调用栈执行，直到微任务队列为空。
5. 再从宏任务队列中取出第一个回调函数，压入调用栈执行。
6. 重复步骤 3-5，形成循环。

3. 经典案例：验证执行顺序

console.log("1. 同步代码开始");
setTimeout(() => {
  console.log("6. 宏任务：setTimeout 回调");
}, 0);
Promise.resolve().then(() => {
  console.log("4. 微任务：Promise.then");
}).then(() => {
  console.log("5. 微任务：第二个 then");
});
console.log("2. 同步代码中间");
async function asyncTask() {
  console.log("3. 同步：async 函数执行");
  await Promise.resolve(); // await 后相当于微任务
  console.log("7. 微任务：await 后续代码");
}
asyncTask();
console.log("8. 同步代码结束");

执行顺序解析：

1. 同步代码入栈：输出'1'→'2'→'3'→'8'（调用栈为空）。
2. 事件循环触发，先处理微任务队列：
   • 第一个 Promise.then：输出'4'，第二个 then 入微任务队列。
   • 第二个 Promise.then：输出'5'，微任务队列暂空。
   • await 对应的微任务：输出'7'，微任务队列彻底清空。
3. 处理宏任务队列：取出 setTimeout 回调，输出'6'。
4. 最终输出：1 → 2 → 3 → 8 → 4 → 5 → 7 → 6。

四、异步编程的演进：从回调到 async/await

JS 异步编程经历了三次重要演进，核心目标是解决'回调地狱'，让代码更易读、易维护。

1. 第一代：回调函数（Callback）

• 特点：直接使用回调函数处理异步结果，简单直观但易产生'回调地狱'。
• 问题：嵌套层级深、代码可读性差、错误处理困难。

示例（回调地狱）：

// 模拟获取用户信息→获取用户订单→获取订单详情
getUserInfo(userId, (userErr, userData) => {
  if (userErr) throw userErr;
  getOrderList(userData.id, (orderErr, orderData) => {
    if (orderErr) throw orderErr;
    getOrderDetail(orderData[0].id, (detailErr, detailData) => {
      if (detailErr) throw detailErr;
      console.log("订单详情：", detailData);
    });
  });
});

2. 第二代：Promise

• 特点：用链式调用（.then ()）替代嵌套回调，解决回调地狱，统一错误处理（.catch ()）。
• 核心状态：pending（进行中）→ fulfilled（成功）/rejected（失败），状态一旦改变不可逆转。

示例（Promise 链式调用）：

getUserInfo(userId)
  .then(userData => getOrderList(userData.id))
  .then(orderData => getOrderDetail(orderData[0].id))
  .then(detailData => console.log("订单详情：", detailData))
  .catch(err => console.error("错误：", err));

3. 第三代：async/await

• 特点：ES7 语法，基于 Promise，用同步的写法编写异步代码，可读性最强，是当前最优异步方案。
• 核心规则：
  • async 函数返回值是 Promise 对象。
  • await 只能在 async 函数中使用，后面跟 Promise 对象，会暂停函数执行，等待 Promise 决议后继续。
  • 错误处理用 try/catch，比 Promise.catch 更直观。

示例（async/await 优化）：

async function getOrderInfo(userId) {
  try {
    const userData = await getUserInfo(userId); // 等待 Promise 成功
    const orderData = await getOrderList(userData.id);
    const detailData = await getOrderDetail(orderData[0].id);
    console.log("订单详情：", detailData);
  } catch (err) {
    console.error("错误：", err); // 统一捕获所有错误
  }
}
getOrderInfo(userId);

五、实战避坑：95 分必备的关键知识点

1. setTimeout 的'延迟'不是绝对的

setTimeout 的延迟时间是'最小延迟'，而非'精确延迟'。因为回调函数需等待调用栈为空、微任务清空后才执行。

示例：

setTimeout(() => {
  console.log("延迟 1 秒执行？");
}, 1000);
// 同步代码阻塞 3 秒
let start = Date.now();
while (Date.now() - start < 3000) {}
// 实际延迟 3 秒才执行，而非 1 秒

2. async/await 的本质是 Promise 语法糖

await 后的代码会被包装成微任务，且 await 会暂停当前 async 函数，而非整个线程。

示例：

async function test() {
  console.log("1");
  await Promise.resolve();
  console.log("3"); // 微任务
}
test();
console.log("2"); // 同步代码，不被 await 阻塞
// 输出：1 → 2 → 3

3. 事件循环的浏览器与 Node.js 差异

• 浏览器：微任务队列优先级高于宏任务队列，微任务执行完再执行宏任务。
• Node.js（v11+）：与浏览器一致；v11 前：先执行完一个宏任务，再执行所有微任务。

4. 避免异步代码中的常见错误

• 不要在 for 循环中使用 var 声明变量（变量提升导致异步回调获取错误值），改用 let/const。
• 不要忽略 Promise 错误（未写.catch () 会导致未捕获异常）。
• 避免过度嵌套 async/await（可用 Promise.all 并行执行多个独立异步任务，提升性能）。

示例（Promise.all 并行优化）：

// 串行执行：总耗时 = 1 秒 + 2 秒 = 3 秒
async function serialTask() {
  const res1 = await fetch("/api/1");
  const res2 = await fetch("/api/2");
}
// 并行执行：总耗时 = 2 秒（取最长任务时间）
async function parallelTask() {
  const promise1 = fetch("/api/1");
  const promise2 = fetch("/api/2");
  const [res1, res2] = await Promise.all([promise1, promise2]);
}

六、总结：同步与异步的核心逻辑

JS 的同步异步本质是单线程模型下的效率优化方案：

• 同步保证代码执行的顺序性和确定性，适用于简单、无耗时的操作。
• 异步通过'任务队列 + 事件循环'实现非阻塞执行，适用于耗时操作（网络、IO 等）。
• 异步编程的演进（回调→Promise→async/await），核心是'降低复杂度、提升可读性'。

掌握本文的原理、案例和避坑点，有助于应对面试中的同步异步问题，以及实际开发中的异步场景优化。