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

I've written much cleaner version: timeout-promise

This is what I came up with after a few hours of debugging and trial+error. It stores the call stack of the location where it is instantiated, allowing rejectWithError() to produce useful errors even when it is called from a parallel asynchronous process, e.g. an event handler.

export class DeferredPromise<T> extends Promise<T> {
  resolve: (value: T | PromiseLike<T>) => void;
  reject: (reason: T | Error) => void;

  initialCallStack: Error['stack'];

  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!;

      // store call stack for location where instance is created
      this.initialCallStack = Error().stack?.split('\n').slice(2).join('\n');
  }

  /** @throws error with amended call stack */
  rejectWithError(error: Error) {
    error.stack = [error.stack?.split('\n')[0], this.initialCallStack].join('\n');
    this.reject(error);
  }
}

You can use it like this:

const deferred = new DeferredPromise();

/* resolve */
deferred.resolve(value);
await deferred;

/* reject */
deferred.reject(Error(errorMessage));
await deferred; // throws Error(errorMessage) with current call stack

/* reject */
deferred.rejectWithError(Error(errorMessage));
await deferred; // throws Error(errorMessage) with amended call stack

/* reject with custom error type */
class CustomError extends Error {}
deferred.rejectWithError( new CustomError(errorMessage) );
await deferred; // throws CustomError(errorMessage) with amended call stack

Example use in my own project:
deferred-promise.ts
usage in badge-usb.ts > BadgeUSB._handlePacket()

You don't have to define constructor argument If you don't need the value returned by .then method to be of your class instance.
Example:

class DeferredPromise extends Promise {
    static get [Symbol.species]() {
        return Promise;
    }
    constructor() {
        let internalResolve = () => { };
        let internalReject = () => { };
        super((resolve, reject) => {
            internalResolve = resolve;
            internalReject = reject;
        });
        this.resolve = internalResolve;
        this.reject = internalReject;
    }
}

This is what I came up with after a few hours of debugging and trial+error. It stores the call stack of the location where it is instantiated, allowing rejectWithError() to produce useful errors even when it is called from a parallel asynchronous process, e.g. an event handler.

export class DeferredPromise<T> extends Promise<T> {
  resolve: (value: T | PromiseLike<T>) => void;
  reject: (reason: T | Error) => void;

  initialCallStack: Error['stack'];

  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!;

      // store call stack for location where instance is created
      this.initialCallStack = Error().stack?.split('\n').slice(2).join('\n');
  }

  /** @throws error with amended call stack */
  rejectWithError(error: Error) {
    error.stack = [error.stack?.split('\n')[0], this.initialCallStack].join('\n');
    this.reject(error);
  }
}

You can use it like this:

const deferred = new DeferredPromise();

/* resolve */
deferred.resolve(value);
await deferred;

/* reject */
deferred.reject(Error(errorMessage));
await deferred; // throws Error(errorMessage) with current call stack

/* reject */
deferred.rejectWithError(Error(errorMessage));
await deferred; // throws Error(errorMessage) with amended call stack

/* reject with custom error type */
class CustomError extends Error {}
deferred.rejectWithError( new CustomError(errorMessage) );
await deferred; // throws CustomError(errorMessage) with amended call stack

Example use in my own project: deferred-promise.ts usage in badge-usb.ts > BadgeUSB._handlePacket()

It works like a magic. Thanks for your work.

@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)