Created
January 21, 2016 23:28
-
-
Save domenic/8ed6048b187ee8f2ec75 to your computer and use it in GitHub Desktop.
How to subclass a promise
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ES6 | |
| class AngularPromise extends Promise { | |
| constructor(executor) { | |
| super((resolve, reject) => { | |
| // before | |
| return executor(resolve, reject); | |
| }); | |
| // after | |
| } | |
| then(onFulfilled, onRejected) { | |
| // before | |
| const returnValue = super.then(onFulfilled, onRejected); | |
| // after | |
| return returnValue; | |
| } | |
| } | |
| // ES5 | |
| function AngularPromise(executor) { | |
| var p = new Promise(function (resolve, reject) { | |
| // before | |
| return executor(resolve, reject); | |
| }); | |
| // after | |
| p.__proto__ = AngularPromise.prototype; | |
| return p; | |
| } | |
| AngularPromise.__proto__ = Promise; | |
| AngularPromise.prototype.__proto__ = Promise.prototype; | |
| AngularPromise.prototype.then = function then(onFulfilled, onRejected) { | |
| // before | |
| var returnValue = Promise.prototype.then.call(this, onFulfilled, onRejected); | |
| // after | |
| return returnValue; | |
| } |
The only thing i dont like is the fact, that the amended call stack is generated, wether used or not. And stack traces are very heavy objects in any javascript engine. So there is super heavy performance bottleneck. We can defer the stack trace generation.
class DeferredPromise<T> extends Promise<T> {
#resolve: (value: T | PromiseLike<T>) => void;
#reject: (reason: T | Error) => void;
#captureStackTrace = (error: Error) => {
Error.captureStackTrace(error, DeferredPromise.prototype.reject);
return error;
}
constructor(executor: ConstructorParameters<typeof Promise<T>>[0] = () => {}) {
let resolver: (value: T | PromiseLike<T>) => void;
let rejector: (reason: T | Error) => void;
super((resolve, reject) => {
resolver = resolve;
rejector = reject;
return executor(resolve, reject); // Promise magic: this line is unexplicably essential
});
this.#resolve = resolver!;
this.#reject = rejector!;
}
resolve(value: T| PromiseLike<T>): void {
this.#resolve(value)
}
/** @throws error with amended call stack */
reject(error: Error) {
this.#reject(error && this.#captureStackTrace(error));
}
}The result is also closer to Promise.withResolvers()
const deferred = new DeferredPromise();
setTimeout(() => {
const err = new Error("Resolved after 1 second");
deferred.reject(err);
}, 1000);
try {
await deferred;
} catch (e) {
console.error('DeferredPromise', e); // "Resolved after 1 second"
}
const promise = Promise.withResolvers();
setTimeout(() => {
const err = new Error("Resolved after 1 second");
promise.reject(err);
}, 1000);
try {
await promise.promise;
} catch (e) {
console.error(e); // "Resolved after 1 second"
}output on my machine:
aras@aras-HP-ZBook-15-G3:~/workspace/promise$ node deferredPromise-mod.mjs
Error: Resolved after 1 second
at Timeout._onTimeout (file:///home/aras/workspace/promise/deferredPromise-mod.mjs:34:14)
at listOnTimeout (node:internal/timers:608:17)
at process.processTimers (node:internal/timers:543:7)
Error: Resolved after 1 second
at Timeout._onTimeout (file:///home/aras/workspace/promise/deferredPromise-mod.mjs:44:17)
at listOnTimeout (node:internal/timers:608:17)
at process.processTimers (node:internal/timers:543:7)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It works like a magic. Thanks for your work.