使用JavaScript实现一个Promise的队列

在前端开发中,你可能想要按顺序执行一系列的异步操作,即使这些操作本身并不依赖彼此的结果。这通常可以通过创建一个"Promise队列"来实现,即将Promise对象放入一个数组中,然后按顺序执行它们。

以下是一个简单的示例,演示如何使用JavaScript实现一个Promise队列:

class PromiseQueue {
    constructor() {
        this.queue = [];
    }

    // 添加Promise到队列
    add(promiseFunc) {
        this.queue.push(promiseFunc);
    }

    // 执行队列中的所有Promise
    execute() {
        let promise = Promise.resolve();
        this.queue.forEach(promiseFunc => {
            promise = promise.then(() => promiseFunc());
        });
        return promise;
    }
}

// 使用示例
let queue = new PromiseQueue();

queue.add(() => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('Promise 1');
        resolve();
    }, 1000);
}));

queue.add(() => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('Promise 2');
        resolve();
    }, 500);
}));

queue.add(() => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('Promise 3');
        resolve();
    }, 1500);
}));

queue.execute().then(() => {
    console.log('All promises are resolved');
});

在这个示例中,我们创建了一个PromiseQueue类,它有一个add方法用于向队列中添加Promise,以及一个execute方法用于执行队列中的所有Promise。注意,我们传递给add方法的不是Promise对象本身,而是一个返回Promise的函数。这是因为我们想要在调用execute方法时才创建和执行这些Promise。

execute方法中,我们使用了一个初始的已解析的Promise(Promise.resolve()),然后遍历队列中的每个Promise函数,将它们链接到前一个Promise的then方法中。这样,每个Promise都会在前一个Promise解析后执行。最后,execute方法返回了一个Promise,该Promise在所有队列中的Promise都解析后解析。

posted @   王铁柱6  阅读(30)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示