什么是异步编程？

JavaScript 是单线程语言，但通过异步编程可以高效处理耗时操作（如网络请求、文件读写）。核心概念包括：

  • 回调函数（Callback）
  • Promise
  • async/await
  • 事件循环（Event Loop）

异步编程让代码在等待耗时操作时不会阻塞主线程，显著提升用户体验

关键概念详解

1. Promise 状态机

Promise 有三种状态：

  • pending（等待中）
  • fulfilled（成功）
  • rejected（失败）
Promise_States

2. async/await 语法糖

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error);
  }
}

通过 await 关键字简化 Promise 链式调用，使代码更接近同步写法

实践示例

网络请求优化

使用 async/await + fetch 实现瀑布流加载：

async function loadResources() {
  const [data1, data2] = await Promise.all([
    fetch('/api/data1').then(r => r.json()),
    fetch('/api/data2').then(r => r.json())
  ]);
  // 处理数据...
}

防抖与节流

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

进阶技巧

  1. 错误处理：使用 try/catch 捕获异步错误
  2. 并发控制：通过 Promise.race() 实现超时机制
  3. 微任务队列：理解 process.nextTick() 和 queueMicrotask() 的差异
  4. 性能优化：避免过度使用异步函数导致的回调地狱

⚠️ 注意：异步操作应始终配合错误处理，确保程序健壮性

扩展阅读

Async_Programming_Flow