当前位置：首页 > JavaScript

js异步实现

2026-03-15 04:47:38JavaScript

异步编程的实现方式

JavaScript 中实现异步编程有多种方式，主要包括回调函数、Promise、async/await 和事件监听。以下是这些方法的详细说明和示例代码。

回调函数

回调函数是 JavaScript 中最基础的异步实现方式。通过将函数作为参数传递给另一个函数，在异步操作完成后调用回调函数。

js异步实现

function fetchData(callback) {
  setTimeout(() => {
    const data = 'Async data';
    callback(data);
  }, 1000);
}

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

Promise

Promise 是 ES6 引入的异步编程解决方案，用于处理异步操作的状态（pending、fulfilled、rejected）。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Async data';
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 输出: Async data
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await 是 ES8 引入的语法糖，基于 Promise，使异步代码看起来更像同步代码。

js异步实现

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = 'Async data';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data); // 输出: Async data
  } catch (error) {
    console.error(error);
  }
}

getData();

事件监听

事件监听适用于基于事件的异步操作，例如 DOM 事件或自定义事件。

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

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

setTimeout(() => {
  emitter.emit('dataFetched', 'Async data');
}, 1000);

异步生成器

异步生成器结合了生成器和异步操作，适用于处理流式数据。

async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value); // 依次输出: 1, 2
  }
})();