当前位置：首页 > JavaScript

js原生实现异步

2026-02-02 22:11:21JavaScript

原生JavaScript实现异步的几种方式

JavaScript原生支持多种异步编程方式，主要包括回调函数、Promise、async/await以及事件监听等。

回调函数(Callback)

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

js原生实现异步

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

fetchData((data) => {
    console.log(data); // 1秒后输出"Data received"
});

Promise

Promise是ES6引入的异步解决方案，提供了更清晰的链式调用方式。

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

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

async/await

ES2017引入的语法糖，使异步代码看起来像同步代码。

js原生实现异步

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

事件监听

通过事件监听机制实现异步处理，常用于DOM事件或自定义事件。

const emitter = new EventTarget();

emitter.addEventListener('data', (e) => {
    console.log(e.detail);
});

setTimeout(() => {
    emitter.dispatchEvent(new CustomEvent('data', {
        detail: 'Data received'
    }));
}, 1000);

Generator函数

ES6引入的Generator函数可以实现更复杂的异步流程控制。

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

const gen = fetchData();
gen.next().value.then(data => console.log(data));

每种方式各有适用场景，现代JavaScript开发中推荐优先使用Promise配合async/await语法，能显著提高代码可读性和可维护性。

标签: js