当前位置：首页 > JavaScript

js原生实现异步

2026-03-15 22:35:59JavaScript

原生JavaScript实现异步的方法

回调函数（Callback）

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

function fetchData(callback) {
    setTimeout(() => {
        const data = 'Async data';
        callback(data);
    }, 1000);
}

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

Promise

Promise是ES6引入的异步解决方案，提供了更清晰的链式调用和错误处理机制。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Async data';
            resolve(data);
        }, 1000);
    });
}

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

async/await

async/await是ES7引入的语法糖，基于Promise实现，使异步代码看起来像同步代码。

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = 'Async data';
            resolve(data);
        }, 1000);
    });
}

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

getData();

事件监听（EventEmitter）

通过自定义事件监听机制实现异步，适合需要多次触发异步操作的场景。

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
    }

    emit(event, ...args) {
        if (this.events[event]) {
            this.events[event].forEach(listener => listener(...args));
        }
    }
}

const emitter = new EventEmitter();
emitter.on('data', (data) => console.log(data)); // 输出: Async data
setTimeout(() => emitter.emit('data', 'Async data'), 1000);

Generator函数

Generator函数是ES6引入的另一种异步解决方案，通过yield暂停函数执行。

js原生实现异步

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

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