当前位置：首页 > JavaScript

原生js异步实现

2026-03-15 19:45:44JavaScript

原生 JavaScript 异步实现方法

原生 JavaScript 提供了多种实现异步编程的方式，以下是常见的几种方法：

回调函数（Callbacks）

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

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

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

Promise

Promise 是 ES6 引入的异步编程解决方案，比回调函数更易于管理和避免回调地狱。

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));

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();

事件监听（Event Listeners）

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

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

setTimeout 和 setInterval

定时器函数用于延迟执行或周期性执行代码。

setTimeout(() => {
    console.log('Executed after 1 second');
}, 1000);

setInterval(() => {
    console.log('Executed every 1 second');
}, 1000);

Generator 函数

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

原生js异步实现

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

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