ecmascript怎样处理异步操作

在 ECMAScript（JavaScript） 中，处理异步操作主要有以下几种方式，按发展顺序和推荐程度如下：

1. 回调函数（Callback）

最原始的方式。

function fetchData(callback) {
  setTimeout(() => {
    callback("数据");
  }, 1000);
}

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

问题：容易形成“回调地狱”（Callback Hell）

a(() => {
  b(() => {
    c(() => {
      // ...
    });
  });
});

2. Promise（ES6）

用于解决回调地狱。

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

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

Promise 链式调用

fetchData()
  .then(a)
  .then(b)
  .then(c)
  .catch(err => console.error(err));

3. async / await（ES2017，推荐）

基于 Promise，语法更像同步代码。

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve("数据"), 1000);
  });
}

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

main();

✅ 优点

• 代码清晰
• 错误处理统一（try/catch）
• 最推荐写法

4. 事件监听 / 发布订阅

适用于事件驱动场景（如 DOM、Node.js）。

button.addEventListener("click", () => {
  console.log("点击了");
});

5. 生成器 + Promise（早期方案）

async/await 出现前的过渡方案。

function* gen() {
  const data = yield fetchData();
  console.log(data);
}

现在基本不用了。

推荐总结

如果你愿意，我也可以：

• 讲 Promise 原理
• 对比 JS 单线程 & 事件循环
• 给 真实项目示例（如接口请求）

你想深入哪一块？