深入理解 JavaScript 异步编程

最新推荐文章于 2025-06-30 23:38:07 发布

原创最新推荐文章于 2025-06-30 23:38:07 发布 · 1.5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端扩展同时被 3 个专栏收录

56 篇文章

订阅专栏

Javascript

49 篇文章

订阅专栏

浏览器

5 篇文章

订阅专栏

JavaScript 的异步特性是其核心特性之一，理解异步编程对于编写高效、响应迅速的代码至关重要。下面我将从基础概念到实现原理，全面解析 JavaScript 的异步机制。

一、同步 vs 异步

同步执行（阻塞式）

console.log('1');
console.log('2');
console.log('3');
// 输出顺序永远是 1 → 2 → 3

异步执行（非阻塞式）

console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
// 可能输出顺序：1 → 3 → 2

二、JavaScript 异步核心机制

1. 事件循环 (Event Loop)

JavaScript 通过事件循环处理异步操作，其基本流程：

调用栈 (Call Stack) → 执行同步代码
    ↓
遇到异步API → 交给Web APIs处理（浏览器）/C++ APIs（Node.js）
    ↓
异步任务完成 → 回调放入任务队列 (Callback Queue)
    ↓
调用栈为空时 → 事件循环将队列中的回调推入调用栈执行

2. 调用栈可视化

function first() {
  console.log('First');
  setTimeout(() => console.log('Timeout'), 0);
  second();
}

function second() {
  console.log('Second');
}

first();
console.log('Global');

// 执行顺序：
// First → Second → Global → Timeout

三、异步编程演进

1. 回调函数 (Callback)

function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

fetchData(data => console.log(data));

回调地狱问题：

getUser(user => {
  getPosts(user.id, posts => {
    getComments(posts[0].id, comments => {
      // 嵌套层级越来越深
    });
  });
});

2. Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() > 0.5 
        ? resolve('Success') 
        : reject('Error');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err));

链式调用解决回调地狱：

getUser()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

3. Async/Await (语法糖)

async function loadData() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    console.error(err);
  }
}

四、微任务 vs 宏任务

执行优先级

同步代码 > 微任务(Promise) > 宏任务(setTimeout)

示例分析

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => {
  console.log('3');
  setTimeout(() => console.log('4'), 0);
});

console.log('5');

// 输出顺序：1 → 5 → 3 → 2 → 4

五、现代异步模式

1. Promise 组合器

// 等待全部完成
Promise.all([promise1, promise2])

// 任意一个完成
Promise.race([promise1, promise2])

// 全部完成（无论成功失败）
Promise.allSettled([promise1, promise2])

// 任意一个成功
Promise.any([promise1, promise2])

2. 异步迭代

async function process(array) {
  for await (let item of array) {
    // 处理每个异步项
  }
}

3. Web Workers

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Start');
worker.onmessage = e => console.log(e.data);

// worker.js
self.onmessage = e => {
  self.postMessage('Processed: ' + e.data);
};

六、常见误区与最佳实践

误区1：认为 setTimeout(fn, 0) 会立即执行

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');
// 输出顺序：Start → End → Timeout

原理解析：

即使延迟为0ms，setTimeout回调仍会被放入宏任务队列
事件循环必须等待：
1. 当前调用栈清空（同步代码执行完毕）
2. 微任务队列清空
3. 才会执行宏任务队列中的回调

误区2：忽略错误处理

// 错误做法
async function fetchData() {
  const data = await getData(); // 可能抛出错误
  // ...
}

// 正确做法
async function fetchData() {
  try {
    const data = await getData();
    // ...
  } catch (err) {
    console.error('Failed:', err);
  }
}

底层原理：

未捕获的 Promise 拒绝在 Node.js 15+ 会导致进程退出
浏览器中会导致未处理的 rejection 事件

3. 误区：在循环中错误使用异步

// 错误示例
// 试图顺序执行异步操作
items.forEach(async item => {
  await processItem(item); // 不会按预期顺序执行
});



// 正确方案
// 方案1：使用 for...of 保证顺序
for (const item of items) {
  await processItem(item);
}

// 方案2：并行处理
await Promise.all(items.map(processItem));

最佳实践

优先使用 async/await 而非回调
总是处理 Promise 拒绝情况
避免在循环中创建不必要的 Promise
合理使用 Promise 组合器处理并发

七、Node.js 特有异步机制

1. process.nextTick

console.log('Start');
process.nextTick(() => console.log('NextTick'));
Promise.resolve().then(() => console.log('Promise'));
console.log('End');

// 输出顺序：Start → End → NextTick → Promise

核心原理：

nextTick 队列是 Node.js 自有的最高优先级微任务队列
执行时机：
1. 在当前操作阶段（阶段概念见下文）结束时
2. 早于 Promise 的微任务
3. 早于所有宏任务

使用场景：

确保回调在事件循环继续前执行
避免递归调用导致的栈溢出

2. setImmediate

setImmediate(() => console.log('Immediate'));
setTimeout(() => console.log('Timeout'), 0);
// 输出顺序可能有变化
// Timeout → Immediate
// 或
// Immediate → Timeout

原理解析：

Node.js 事件循环分为多个阶段：

定时器 → pending回调 → idle/prepare → 轮询 → 检查 → 关闭回调

setImmediate 在"检查阶段"执行
setTimeout(0) 在"定时器阶段"执行
执行顺序取决于事件循环的当前阶段

设计目的：

在I/O操作后立即执行代码，比setTimeout更高效

3. Node.js 事件循环阶段详解

各阶段说明：

定时器阶段：执行 setTimeout 和 setInterval 回调
待定回调：执行系统操作（如TCP错误）的回调
轮询阶段：
- 检索新的I/O事件
- 执行I/O相关回调（文件、网络等）
检查阶段：执行 setImmediate 回调
关闭回调：处理关闭事件（如 socket.on('close')）

4. 文件I/O的特殊性

Libuv 线程池机制：

Node.js 的文件操作（如 fs.readFile）使用线程池实现异步
网络I/O则使用操作系统内核异步接口（如epoll/kqueue）
这解释了为什么文件I/O的性能特征与其他异步操作不同

// 网络I/O（非阻塞）
http.get('http://example.com', res => {
  console.log('网络响应');
});

// 文件I/O（使用线程池）
fs.readFile('/bigfile', () => {
  console.log('文件读取完成');
});