当前位置：首页 > JavaScript

js怎么实现异步

2026-02-28 20:37:14JavaScript

异步实现的常见方法

JavaScript 中实现异步操作的核心目的是避免阻塞主线程，同时处理耗时任务（如网络请求、文件读写等）。以下是几种主流实现方式：

回调函数（Callback）

通过将函数作为参数传递，在异步任务完成后触发回调。这是最基础的异步模式，但容易导致“回调地狱”。

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

fetchData((data) => {
  console.log(data); // 输出: Data received
});

Promise 对象

Promise 提供了更清晰的链式调用语法，解决回调嵌套问题。它有三种状态：pending、fulfilled、rejected。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // 输出: Data received
  .catch(error => console.error(error));

async/await

基于 Promise 的语法糖，用同步写法实现异步逻辑，代码更易读。

async function getData() {
  try {
    const data = await fetchData(); // 等待 Promise 解决
    console.log(data); // 输出: Data received
  } catch (error) {
    console.error(error);
  }
}
getData();

事件监听（EventEmitter）

通过事件驱动模型实现异步，常见于 Node.js 的 EventEmitter 模块。

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

emitter.on('data', (data) => {
  console.log(data); // 输出: Data received
});

setTimeout(() => {
  emitter.emit('data', 'Data received');
}, 1000);

Web Workers

在浏览器中通过多线程实现异步，适合 CPU 密集型任务。

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Start');
worker.onmessage = (e) => {
  console.log(e.data); // 输出: Work done
};

// worker.js
self.onmessage = (e) => {
  setTimeout(() => {
    self.postMessage('Work done');
  }, 1000);
};

生成器函数（Generators）

通过 function* 和 yield 暂停函数执行，配合 Promise 实现异步流程控制。

function* fetchData() {
  const data = yield new Promise(resolve => {
    setTimeout(() => resolve('Data received'), 1000);
  });
  console.log(data);
}

const generator = fetchData();
generator.next().value.then(data => generator.next(data));