当前位置：首页 > JavaScript

js实现异步

2026-02-01 13:31:51JavaScript

异步编程的实现方式

在JavaScript中，异步编程可以通过多种方式实现，以下是常见的几种方法：

回调函数（Callbacks）

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

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

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

Promise

Promise是一种更现代的异步处理方式，它代表一个异步操作的最终完成或失败，并可以链式调用。

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

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

async/await

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

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

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

getData();

事件监听（Event Listeners）

通过事件监听器处理异步操作，常见于DOM事件或自定义事件。

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

发布/订阅模式（Pub/Sub）

通过发布和订阅事件来实现异步通信，适用于复杂的异步场景。

const events = {};

function on(eventName, callback) {
    if (!events[eventName]) {
        events[eventName] = [];
    }
    events[eventName].push(callback);
}

function emit(eventName, data) {
    if (events[eventName]) {
        events[eventName].forEach(callback => callback(data));
    }
}

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

setTimeout(() => {
    emit('dataFetched', 'Data fetched');
}, 1000);