当前位置：首页 > JavaScript

原生js异步实现

2026-04-07 13:09:14JavaScript

原生 JavaScript 异步实现方法

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

回调函数（Callbacks）

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

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

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

缺点：容易导致“回调地狱”（Callback Hell），代码难以维护。

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

特点：

原生js异步实现

支持链式调用（.then()）。
可以通过 .catch() 统一处理错误。

async/await

ES2017 引入的语法糖，基于 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();

优点：

代码更简洁，易于阅读。
错误处理通过 try/catch 实现。

EventEmitter

通过事件监听机制实现异步，常用于浏览器事件或 Node.js 的 events 模块。

原生js异步实现

// 浏览器示例
document.addEventListener('click', () => {
    console.log('Clicked!');
});

适用场景：用户交互、自定义事件驱动逻辑。

Web Workers

用于在后台线程执行耗时任务，避免阻塞主线程。

// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage('Start task');
worker.onmessage = (e) => {
    console.log(e.data); // 接收 Worker 返回的结果
};

// worker.js
self.onmessage = (e) => {
    const result = e.data + ' processed';
    self.postMessage(result);
};

注意：Worker 线程无法直接操作 DOM。