当前位置：首页 > JavaScript

js异步实现方式

2026-03-16 06:12:35JavaScript

回调函数（Callback）

回调函数是最基础的异步实现方式，将函数作为参数传递给另一个函数，在异步操作完成后调用。例如处理文件读取或网络请求：

fs.readFile('file.txt', 'utf8', function(err, data) {
    if (err) throw err;
    console.log(data);
});

Promise

Promise 对象代表异步操作的最终完成或失败，提供链式调用避免回调地狱。通过 then 和 catch 方法处理结果：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

async/await

async/await 是建立在 Promise 之上的语法糖，使异步代码看起来像同步代码。async 函数返回 Promise，await 暂停执行直到 Promise 完成：

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

事件监听（Event Emitter）

通过事件驱动模型实现异步，常见于 Node.js 的 EventEmitter 类。监听特定事件并在触发时执行回调：

const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('data', (data) => {
    console.log('Received:', data);
});

emitter.emit('data', 'Sample data');

Generator 函数

Generator 函数通过 yield 暂停执行，与 Promise 结合可实现类似 async/await 的效果。需手动控制迭代器：

function* fetchData() {
    const response = yield fetch('https://api.example.com/data');
    const data = yield response.json();
    console.log(data);
}

const iterator = fetchData();
iterator.next().value
    .then(res => iterator.next(res).value)
    .then(data => iterator.next(data));

Web Workers

Web Workers 允许在后台线程运行脚本，避免阻塞主线程。通过 postMessage 和 onmessage 通信：

js异步实现方式

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
    console.log('Result:', e.data);
};
worker.postMessage('start');

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