Skip to content

异步编程

什么是异步编程？

异步编程是指程序在执行某些耗时操作（如网络请求、文件读取）时，不会阻塞后续代码的执行，而是让这些操作在后台运行，完成后通过回调函数通知结果。

为什么需要异步？

  • 避免阻塞主线程，保持用户界面响应
  • 提高程序执行效率
  • 处理I/O密集型任务（网络请求、文件操作等）

主要异步模式

1. 回调函数（Callback）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// 经典回调示例
setTimeout(() => {
  console.log('延迟执行');
}, 1000);

// 回调地狱示例
getData((data) => {
  processData(data, (result) => {
    saveResult(result, (success) => {
      console.log('完成');
    });
  });
});

2. Promise

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Promise 基本用法
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

// Promise 链式调用
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

3. async/await

// 使用 async/await 简化异步代码
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

// 调用异步函数
fetchData();

常用异步函数

// setTimeout/setInterval
setTimeout(() => console.log('执行'), 1000);

// Promise 相关
Promise.all([promise1, promise2]) // 并行执行
Promise.race([promise1, promise2]) // 竞速执行

// 现代异步 API
fetch('/api/data'); // 网络请求
navigator.geolocation.getCurrentPosition(); // 获取位置

最佳实践

  • 优先使用 async/await 使代码更易读
  • 始终处理 Promise 的错误情况
  • 避免回调地狱，使用 Promise 或 async/await
  • 注意并发控制，避免过多并行请求

异步编程是 JavaScript 的核心概念，掌握它能让你更好地处理复杂的应用逻辑。