ecmascript如何处理异步操作

在 ECMAScript（JavaScript）中，处理异步操作的发展经历了几个阶段，从早期的回调函数，到 Promise，再到 async/await。下面系统地介绍常见方式及适用场景。

一、回调函数（Callback）

最原始的异步处理方式。

function fetchData(callback) {
  setTimeout(() => {
    callback('数据来了');
  }, 1000);
}

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

问题：

• 回调嵌套过多 → “回调地狱”
• 错误处理不直观

二、Promise（ES6）

Promise 是异步操作的标准化方案。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据来了');
    }, 1000);
  });
}

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

常用方法

• Promise.then
• Promise.catch
• Promise.finally
• Promise.all([p1, p2])
• Promise.race([p1, p2])
• Promise.allSettled（ES2020）

三、async / await（ES2017）

基于 Promise 的语法糖，使异步代码“看起来像同步”。

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

getData();

优点：

• 代码结构清晰
• 错误处理使用 try/catch
• 易于维护

四、并发与串行控制

1. 并发执行

const [a, b] = await Promise.all([task1(), task2()]);

2. 串行执行

for (const url of urls) {
  await request(url);
}

五、事件驱动（Event / EventEmitter）

在 Node.js 中常见：

const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('done', (msg) => {
  console.log(msg);
});

emitter.emit('done', '完成');

六、定时器类异步

setTimeout
setInterval
requestAnimationFrame（浏览器）

七、异步迭代（ES2018）

for await (const item of asyncGenerator()) {
  console.log(item);
}

八、最佳实践建议

✅ 优先使用 async/await
✅ 用 Promise.all 做并发
✅ 避免混用 callback 和 Promise
✅ 始终处理异常（.catch 或 try/catch）

如果你有具体场景（如：前端请求、Node.js IO、并发限制、取消请求），我可以给更针对性的示例。