【JS】JS同步与异步的区别

同步与异步的区别

同步（Synchronous）

• 定义：任务按顺序执行，后一个任务必须等待前一个任务完成后才能开始。
• 特点：代码是阻塞式的，执行顺序固定。
• 示例：

console.log("任务1");
console.log("任务2"); // 必须等任务1执行完才会执行

• async/await 的作用：
  虽然 async/await 是基于 Promise 的语法糖，但它可以让异步代码看起来像同步代码，即让多个异步操作按顺序执行。

---

异步（Asynchronous）

• 定义：任务是非阻塞的，主逻辑不会等待异步任务完成，而是继续执行后续代码。异步任务的完成顺序取决于它们的执行速度，谁先完成谁先返回。
• 特点：代码是非阻塞式的，执行顺序不固定。
• 示例：

setTimeout(() => console.log("异步任务1"), 1000);
setTimeout(() => console.log("异步任务2"), 500); // 可能先输出

• 常见异步操作：

• • AJAX 请求
  • Promise（.then() 链式调用）
  • setTimeout / setInterval

---

Promise 详解

1. 基本概念

• 作用：解决“回调地狱”问题，用链式调用（.then()）管理异步操作。
• 三种状态：

• • pending（初始状态）
  • fulfilled（成功，调用 resolve）
  • rejected（失败，调用 reject）

• 状态变化：
  一旦状态从 pending 变为 fulfilled 或 rejected，就会触发对应的 .then() 或 .catch()。

2. Promise 的异步性

• 为什么是异步的？
  resolve 或 reject 的执行顺序决定了 .then() 或 .catch() 的触发顺序，因此多个 Promise 谁先完成谁先回调。

3. Promise 组合方法

方法	作用	特点
Promise.all([...])	等待所有 Promise 成功，返回结果数组；如果有一个失败，立即返回该失败值。	全成功或一票否决
Promise.race([...])	返回最先完成的 Promise 的结果（无论成功或失败）。	竞速，只取第一个结果

---

async/await 的本质

• async 函数：
  声明一个函数是异步的，并隐式返回一个 Promise。

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

• await 关键字：

• • 只能在 async 函数中使用。
  • 会暂停代码执行，等待后面的 Promise 完成，并返回其结果（如果是 reject，则抛出异常）。
  • 注意：虽然 await 会让代码“看起来”同步，但实际不会阻塞主线程（例如浏览器 UI 仍可响应）。

示例对比

// 异步代码（Promise）
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

// 用 async/await 改写（更像同步写法）
async function getData() {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

---

关键总结

1. 同步 vs 异步：

• • 同步是“排队”，异步是“赛跑”。
  • async/await 是语法糖，本质仍是异步，但写法更直观。

2. Promise：

• • 状态不可逆（pending → fulfilled/rejected）。
  • .all 适合并行任务，.race 适合超时控制。

3. async/await：

• • 错误处理需要用 try/catch。
  • 底层依然是 Promise，只是让代码更易读。