当前位置:首页 > 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引入的异步解决方案,提供了更清晰的链式调用和错误处理机制。

js原生实现异步

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实现,使异步代码看起来像同步代码。

js原生实现异步

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暂停函数执行。

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

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

选择建议

  • 简单异步任务可使用回调函数或Promise。
  • 复杂异步逻辑推荐使用async/await,代码更易读。
  • 需要事件驱动的场景适合事件监听机制。
  • Generator函数通常与库(如co)配合使用,原生场景较少直接使用。

标签: js
分享给朋友:

相关文章

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…