当前位置：首页 > JavaScript

async 实现 js

2026-02-01 13:41:31JavaScript

异步编程的实现方式

JavaScript 中异步编程可以通过多种方式实现，包括回调函数、Promise、async/await 等。每种方式都有其适用场景和优缺点。

回调函数

回调函数是异步编程最基础的方式，通过将函数作为参数传递给另一个函数，在异步操作完成后执行回调。

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

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

回调函数的缺点是容易导致回调地狱（Callback Hell），代码难以维护。

Promise

Promise 是 ES6 引入的异步编程解决方案，解决了回调地狱的问题。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);
  });

Promise 支持链式调用，代码更加清晰。

async/await

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

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

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

main();

async/await 使代码更加简洁易读，错误处理也更加方便。

事件监听

事件监听是另一种异步编程方式，常用于 DOM 事件或自定义事件。

document.getElementById('button').addEventListener('click', () => {
  console.log('Button clicked');
});

事件监听适用于需要多次触发的异步操作。

生成器函数

生成器函数（Generator）是 ES6 引入的另一种异步编程方式，通过 yield 暂停函数执行。

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

const generator = fetchData();
generator.next().value.then((data) => {
  console.log(data); // 输出: Data received
});

生成器函数适用于复杂的异步流程控制。