A single pledge fulfilled in two distinct ways

Question

A single pledge fulfilled in two distinct ways

My code ended up with a promise that raised some questions. Is it acceptable to resolve one condition with the token string value (resolve(token)), while resolving another condition with a promise of type Promise<string>: resolve(resultPromise);

const finalPromise = new Promise<string>(resolve => {
    resultPromise.then(token => {
        if (Pending) {      
            resolve(token);
        } else if (!this.tokenIsValid(token)) {
            resultPromise = requestToken();
            resolve(resultPromise);
        } else {
            resolve(token);
        }
    });

I attempted to change it like this and encountered a TypeScript error:

//throwing error error noUnnecessaryCallbackWrapper: No need to wrap 'resolve' in another function. Just use it directly.

#second version
    const finalPromise = new Promise<string>(resolve => {
    resultPromise.then(token => {
        if (Pending) {      
            resolve(token);
        } else if (!this.tokenIsValid(token)) {
            requestToken().then(token => resolve(token)); 
        } else {
            resolve(token);
        }
    });

If I return resolve(resultPromise), what would be the type of finalPromise? My concern lies in another function receiving finalPromise where the input type is Promise<string>. How can I ensure that finalPromise returns a Promise of type string without causing any confusion? Your guidance is greatly appreciated.

javascript typescript promise resolve

Answer 1

Answer №1

In the comments, it was mentioned that you are utilizing the Promise constructor anti-pattern. To rectify this issue, it is recommended to directly chain your code to resultPromise.

Furthermore, you can streamline the handling of the requestToken call by returning it:

Typically, a value returned by a .then handler is immediately passed to the next handler. However, there is an exception.

If the returned value is a promise, then the execution will pause until the promise settles. Subsequently, the result of that promise is provided to the next .then handler.

(Quoted from this article)

This approach would lead to something similar to the following code snippet:

const finalPromise: Promise<string> = resultPromise.then(token => {
    if (Pending) {      
        return token;
    } else if (!this.tokenIsValid(token)) {
        return requestToken();
    } else {
        return token;
    }
);

// Later 
finalPromise.then(stringToken => console.log(stringToken));

The if-else statement could also be simplified, but due to uncertainty about the type of Pending, I did not make adjustments in this regard.

Just for your information: While it may not apply in your current scenario, if at any point you require multiple return types, AVOID USING any and opt for union type instead:

myAwesomeFunctionReturnStringOrNumber(): string | number {
   ...
};

myOtherFunctionTakeStringOrNumber(param: string | number) {
   ...
};

Answer 2

In the comments, it was mentioned that you are utilizing the Promise constructor anti-pattern. To rectify this issue, it is recommended to directly chain your code to resultPromise.

Furthermore, you can streamline the handling of the requestToken call by returning it:

Typically, a value returned by a .then handler is immediately passed to the next handler. However, there is an exception.

If the returned value is a promise, then the execution will pause until the promise settles. Subsequently, the result of that promise is provided to the next .then handler.

(Quoted from this article)

This approach would lead to something similar to the following code snippet:

const finalPromise: Promise<string> = resultPromise.then(token => {
    if (Pending) {      
        return token;
    } else if (!this.tokenIsValid(token)) {
        return requestToken();
    } else {
        return token;
    }
);

// Later 
finalPromise.then(stringToken => console.log(stringToken));

The if-else statement could also be simplified, but due to uncertainty about the type of Pending, I did not make adjustments in this regard.

Just for your information: While it may not apply in your current scenario, if at any point you require multiple return types, AVOID USING any and opt for union type instead:

myAwesomeFunctionReturnStringOrNumber(): string | number {
   ...
};

myOtherFunctionTakeStringOrNumber(param: string | number) {
   ...
};

A single pledge fulfilled in two distinct ways

Answer №1

Similar questions

Implementing ES6 Angular directives with two-way isolated binding

Creating a recursive setTimeout loop using Coffeescript

Discovering the center of an element and implementing a left float

Guidelines for transferring data when a button is held down or pressed

Inserting a value into a Node/Express session

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

Transforming an array of strings into a Name/Value object using JavaScript

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Ways to implement the flow of change occurrences in the mat-select component

What are the steps for making Ajax calls?

Challenges with browsing navigation in Selenium WebDriver

Asynchronous Return in NodeJS Class Methods

Struggling to align my image in the center while applying a hover effect using CSS

What is the best way to search for an Enum based on its value?

Forwarding to another page following an AJAX post request to a Django view

Separate the selected option in the TEXTAREA by commas to make it easier to

A loop in JavaScript/TypeScript that runs precisely once every minute

Issue with importing MomentJS globally in TypeScript

Auto-fit HTML Webpage Resizer Simplified

Having trouble executing the project using Gulp