当前位置：首页 > JavaScript

js async实现

2026-03-14 03:45:10JavaScript

异步编程的实现方式

在JavaScript中，异步编程可以通过多种方式实现，主要包括回调函数、Promise、async/await等。这些方法各有特点，适用于不同的场景。

回调函数

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

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

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

回调函数的缺点是容易导致“回调地狱”（Callback Hell），即多层嵌套的回调函数使代码难以维护。

Promise

Promise是一种更现代的异步编程解决方案，它代表一个异步操作的最终完成或失败，并允许链式调用。

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通过then和catch方法处理成功和失败的情况，避免了回调地狱的问题。

async/await

async/await是基于Promise的语法糖，使得异步代码看起来更像同步代码，提高了代码的可读性。

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

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

processData();

async函数返回一个Promise，await关键字用于等待Promise的解决或拒绝。使用try/catch块可以捕获异步操作中的错误。

事件监听

在某些场景下，可以通过事件监听的方式实现异步编程，例如DOM事件或自定义事件。

const eventEmitter = new EventEmitter();

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

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

事件监听适用于需要多次触发异步操作的场景，例如用户交互或实时数据更新。

生成器函数

生成器函数（Generator Function）可以与Promise结合使用，实现更复杂的异步控制流。

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

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

生成器函数通过yield暂停执行，适用于需要精细控制异步流程的场景。

js async实现