如何给Promise添加进度通知的功能?

在JavaScript中,Promise 对象是一个返回值的代理,这个返回值在Promise被创建时可能是未知的。它允许你为异步操作的成功返回值或者失败原因关联处理方法。然而,标准的 Promise 并不提供直接的进度通知功能。

要给 Promise 添加进度通知的功能,你可以使用一个扩展的 Promise 类或者一个包含进度事件的对象。以下是一个简单的示例,说明如何创建一个包含进度通知的 Promise

class ProgressPromise {
    constructor(executor, onProgress) {
        this.progressListeners = [];
        if (onProgress) {
            this.progress(onProgress);
        }

        this.promise = new Promise((resolve, reject) => {
            executor(resolve, reject, (progress) => {
                this.progressListeners.forEach(listener => listener(progress));
            });
        });
    }

    then(onFulfilled, onRejected) {
        return this.promise.then(onFulfilled, onRejected);
    }

    catch(onRejected) {
        return this.promise.catch(onRejected);
    }

    progress(listener) {
        this.progressListeners.push(listener);
    }
}

// 使用示例:
const pp = new ProgressPromise((resolve, reject, progress) => {
    const intervalId = setInterval(() => {
        const value = Math.floor(Math.random() * 100); // 模拟进度值
        progress(value); // 通知进度
        if (value === 100) {
            clearInterval(intervalId);
            resolve('Done!'); // 完成时解析Promise
        }
    }, 1000);
});

pp.progress(value => {
    console.log(`Progress: ${value}%`); // 处理进度事件
});

pp.then(result => {
    console.log(result); // 处理Promise的解析值
});

在这个示例中,ProgressPromise 类封装了一个标准的 Promise 对象,并添加了一个 progress 方法来注册进度事件监听器。当执行器函数(executor)调用 progress 回调函数时,所有注册的进度监听器都会被调用,并接收到当前的进度值。这样,你就可以在异步操作执行过程中获取并处理进度信息了。

posted @ 2025-01-12 06:04  王铁柱6  阅读(44)  评论(0)    收藏  举报