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

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

Tips for limiting the maximum number of characters in CkEditor 5 for react js

Is there a way for app.use to identify and match requests that begin with the same path?

Using ThreeJS to project a texture onto a mesh surface

Having trouble finding the "make:migration" command in Adonis 5 - any suggestions?

Customize your Joi message using the .or() method

What is the best method to determine offsetTop in relation to the parent element instead of the top of

Using class-validator in Node.js to validate arrays of objects

What are the steps to rename a file in Parcel without using automated tools?

Utilize and store images based on the individual user's preferences with PlayCanvas

Javascript challenges for beginners in coding world

Techniques for transferring images directly into HTML canvas games

The message I'm attempting to include in the request is not being transmitted along with the request

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

Using jQuery to load HTML response into entire page

Steps for effectively deleting browsing history on Ionic

Extract data from an API endpoint using JavaScript or React

How can I import a JavaScript file from the assets folder in Nuxt.js?

PHP is returning an empty response during an AJAX request

It is not possible to import node_modules within an electron worker process