A specialized type of Promise called Deferred

Question

A specialized type of Promise called Deferred

Is there a way to create a Deferred promise that extends Promise while maintaining type-safe usage in scenarios where a typical Promise is expected?

Here's one possible implementation:

export class CustomDeferred<T> extends Promise<T> {                                   
  public _resolveSelf;
  public _rejectSelf;                                                           
  constructor() {
    super(
      (resolve, reject) =>
      {
        this._resolveSelf = resolve;
        this._rejectSelf = reject;
      }
    )
  }                                                                             
  public resolve(val:T) { this._resolveSelf(val); }
  public reject(reason:any) { this._rejectSelf(reason); }                        
}

However, using this implementation may lead to a TypeError: _this is undefined error.

When looking at the Typescript playground example, it becomes apparent that the compiled javascript code has some quirks. In line 15, properties of _this are being assigned even before its declaration.

typescript promise deferred

Answer 1

Answer №1

class Deferred<T> extends Promise<T> {

  private _resolveSelf;
  private _rejectSelf;
  private promise: Promise<T>

  constructor() {
    this.promise = new Promise( (resolve, reject) =>
      {
        this._resolveSelf = resolve
        this._rejectSelf = reject

      }
    )
  }

  public then<TResult1 = T, TResult2 = never>(
    onfulfilled?: ((value: T) =>
      TResult1 | PromiseLike<TResult1>) | undefined | null,
    onrejected?: ((reason: any) =>
      TResult2 | PromiseLike<TResult2>) | undefined | null
    ): Promise<TResult1 | TResult2> {
      return this.promise.then(onfulfilled, onrejected)
    }

  public catch<TResult = never>(
    onrejected?: ((reason: any) =>
      TResult | PromiseLike<TResult>) | undefined | null
    ): Promise<T | TResult> {
      return this.promise.catch(onrejected)
    }

  public resolve(val:T) { this._resolveSelf(val) }
  public reject(reason:any) { this._rejectSelf(reason) }

  [Symbol.toStringTag]: 'Promise'

}

The Deferred class extends the Promise class and provides methods for resolving and rejecting promises. The method signatures of then and catch are inspired by TypeScript's Promise interface and have been cleaned up for readability. Additionally, the [Symbol.toStringTag] line is included to ensure proper compilation in TypeScript.

Answer 2

class Deferred<T> extends Promise<T> {

  private _resolveSelf;
  private _rejectSelf;
  private promise: Promise<T>

  constructor() {
    this.promise = new Promise( (resolve, reject) =>
      {
        this._resolveSelf = resolve
        this._rejectSelf = reject

      }
    )
  }

  public then<TResult1 = T, TResult2 = never>(
    onfulfilled?: ((value: T) =>
      TResult1 | PromiseLike<TResult1>) | undefined | null,
    onrejected?: ((reason: any) =>
      TResult2 | PromiseLike<TResult2>) | undefined | null
    ): Promise<TResult1 | TResult2> {
      return this.promise.then(onfulfilled, onrejected)
    }

  public catch<TResult = never>(
    onrejected?: ((reason: any) =>
      TResult | PromiseLike<TResult>) | undefined | null
    ): Promise<T | TResult> {
      return this.promise.catch(onrejected)
    }

  public resolve(val:T) { this._resolveSelf(val) }
  public reject(reason:any) { this._rejectSelf(reason) }

  [Symbol.toStringTag]: 'Promise'

}

The Deferred class extends the Promise class and provides methods for resolving and rejecting promises. The method signatures of then and catch are inspired by TypeScript's Promise interface and have been cleaned up for readability. Additionally, the [Symbol.toStringTag] line is included to ensure proper compilation in TypeScript.

Answer 3

Answer №2

How can you create a Deferred promise that extends the functionality of a Promise?

It is advised not to do so at all. There are no valid reasons to utilize deferreds.

Furthermore, creating a deferred object that essentially acts as a promise is not recommended. It is best to separate their functionalities:

function defer() {
    var deferred = {};
    deferred.promise = new Promise(resolve => {
        deferred.resolve = resolve;
    });
    return deferred;
}

One may notice something interesting in the compiled javascript code. In line 15, properties of '_this' are being assigned during its declaration.

This behavior is due to how super works: You cannot access this until after the parent constructor has returned and initialized it. However, the promise executor callback gets executed before that point.

To achieve the desired outcome, the following code snippet should be used:

export class Deferred<T> extends Promise<T> {
  public resolve: T=>void;
  public reject: any=>void;
  constructor() {
    var resolveSelf, rejectSelf
    super((resolve, reject) => {
      resolveSelf = resolve
      _rejectSelf = reject
    })
    this.resolve = resolveSelf;
    this.reject = rejectSelf;
  }
}

Answer 4

How can you create a Deferred promise that extends the functionality of a Promise?

It is advised not to do so at all. There are no valid reasons to utilize deferreds.

Furthermore, creating a deferred object that essentially acts as a promise is not recommended. It is best to separate their functionalities:

function defer() {
    var deferred = {};
    deferred.promise = new Promise(resolve => {
        deferred.resolve = resolve;
    });
    return deferred;
}

One may notice something interesting in the compiled javascript code. In line 15, properties of '_this' are being assigned during its declaration.

This behavior is due to how super works: You cannot access this until after the parent constructor has returned and initialized it. However, the promise executor callback gets executed before that point.

To achieve the desired outcome, the following code snippet should be used:

export class Deferred<T> extends Promise<T> {
  public resolve: T=>void;
  public reject: any=>void;
  constructor() {
    var resolveSelf, rejectSelf
    super((resolve, reject) => {
      resolveSelf = resolve
      _rejectSelf = reject
    })
    this.resolve = resolveSelf;
    this.reject = rejectSelf;
  }
}

A specialized type of Promise called Deferred

Answer №1

Answer №2

Similar questions

Lambda functions that support multiple languages coexisting in a single directory

Utilizing Typescript and sinon to mock the functionalities of jsonwebtoken

Display a custom error message containing a string in an Angular error alert

Can you explain how to incorporate global functions from a javascript library into an Angular 2 project?

Convert an array with three dimensions into a two-dimensional array that includes tuples with two immutable string values

Monitoring and Analyzing Angular2 Events through Google Analytics

Searching is disrupted when the page is refreshed in NextJS

When null is assigned to a type in Typescript, it does not result in an error being triggered

Generate a Jest dummy for testing an IncomingMessage object

There is a method in TypeScript called "Mapping IDs to Object Properties"

Listening for Angular 2 router events

Having trouble receiving accurate intellisense suggestions for MongoDB operations

Differences between ts-loader and babel-loader when working with TypeScript in webpack

The intricate Q pledge: the assurance of one promise generating a series of other promises

I continue encountering the Server Error message: "Error: The default export on page "/products/all" is not a React Component."

How do I connect with the global error handling in Vue?

The Typescript module in question does not contain any exported components or functions related to

associating an enum with a specific key value using generics

I'm looking for a way to modify my standard function so that it can receive warnings

Is it possible to use the HostListener in Angular 7 to detect any scroll event occurring on a specific element within a webpage?