How to subclass a promise

angularpromise.js

// 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;
}

@Pwuts
@heecheon92

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)