如何给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 回调函数时,所有注册的进度监听器都会被调用,并接收到当前的进度值。这样,你就可以在异步操作执行过程中获取并处理进度信息了。
浙公网安备 33010602011771号