ESLint flags a misuse of promises in my code that I believe is acceptable

Question

ESLint flags a misuse of promises in my code that I believe is acceptable

This symbol table implementation includes a method that needs some adjustments:

    public getAllSymbols(type?: typeof Symbol, localOnly = false): Promise<Set<Symbol>> {
        const promise = super.getAllSymbols(type ?? Symbol, localOnly);

        return new Promise(async (resolve, reject) => {
            try {
                let result = await promise;

                if (!localOnly) {
                    this.dependencies.forEach(async (dependency) => {
                        result = new Set([...result, ...await dependency.getAllSymbols(type, localOnly)]);
                    });
                }

                resolve(result);
            } catch (reason) {
                reject(reason);
            }
        });
    }

Although this code is functional, ESLint raises concerns about 2 promise misuses:

https://i.stack.imgur.com/1Z2fF.png

The linter error indicates a "Promise returned in function argument where a void return was expected. no-misused-promises".

To address this issue and eliminate the linting error, we need to make some modifications to the code structure.

javascript eslint

Answer 1

Answer №1

The issues in your code:

Avoid making the Executor function async as it is considered an anti-pattern
No need to wrap the promise returned by super.getAllSymbol(...) in a promise constructor - this is another anti-pattern. Directly call the then() method on the promise.
Do not use async-await with forEach() as it will not wait for promises to settle before moving to the next iteration. Instead, consider using Promise.all() with map().

Your revised code (types removed for simplicity):

public getAllSymbols(type, localOnly = false) {

     const promise = super.getAllSymbols(type ?? Symbol, localOnly);

     return promise
         .then(result => {
             if (!localOnly) {
                 return Promise.all(this.dependencies.map(dep => (
                    dep.getAllSymbols(type, localOnly))
                 )))
                 .then(resultArr => {
                     return new Set([...result, ...resultArr]);
                 });
             }
             else {
                 return result;
             }                       
         });
}

Alternatively, you can use the async-await syntax:

public async getAllSymbols(type, localOnly = false) {

    const result = await super.getAllSymbols(type ?? Symbol, localOnly);

    if (!localOnly) {
        const resultArr = await Promise.all(this.dependencies.map(dep => ( 
            dep.getAllSymbols(type, localOnly)
        )));

        return new Set([...result, ...resultArr]);                         
    }

    return result;                   
}

I have omitted the catch block assuming error handling should be done by the calling code.

To call the above function:

getAllSymbols(...)
   .then(result => { ... })
   .catch(error => { ... });

or using async-await:

try {
    const result = await getAllSymbols(...);
    // handle success
   
} catch (error) {
    // handle error
}

Answer 2

The issues in your code:

Avoid making the Executor function async as it is considered an anti-pattern
No need to wrap the promise returned by super.getAllSymbol(...) in a promise constructor - this is another anti-pattern. Directly call the then() method on the promise.
Do not use async-await with forEach() as it will not wait for promises to settle before moving to the next iteration. Instead, consider using Promise.all() with map().

Your revised code (types removed for simplicity):

public getAllSymbols(type, localOnly = false) {

     const promise = super.getAllSymbols(type ?? Symbol, localOnly);

     return promise
         .then(result => {
             if (!localOnly) {
                 return Promise.all(this.dependencies.map(dep => (
                    dep.getAllSymbols(type, localOnly))
                 )))
                 .then(resultArr => {
                     return new Set([...result, ...resultArr]);
                 });
             }
             else {
                 return result;
             }                       
         });
}

Alternatively, you can use the async-await syntax:

public async getAllSymbols(type, localOnly = false) {

    const result = await super.getAllSymbols(type ?? Symbol, localOnly);

    if (!localOnly) {
        const resultArr = await Promise.all(this.dependencies.map(dep => ( 
            dep.getAllSymbols(type, localOnly)
        )));

        return new Set([...result, ...resultArr]);                         
    }

    return result;                   
}

I have omitted the catch block assuming error handling should be done by the calling code.

To call the above function:

getAllSymbols(...)
   .then(result => { ... })
   .catch(error => { ... });

or using async-await:

try {
    const result = await getAllSymbols(...);
    // handle success
   
} catch (error) {
    // handle error
}

ESLint flags a misuse of promises in my code that I believe is acceptable

Answer №1

Similar questions

Here's a helpful guide on verifying the presence of a value within an array in Quasar

Unleashing the power of scroll-based dynamic pagination in ReactJS

Angular 2: Applying class to td element when clicked

The problem with the first item title in the Jquery slider is causing

I can't figure out why this form isn't triggering the JS function. I'm attempting to create an autocomplete form field that connects to a MySQL database using a PHP script and AJAX

Make sure to load the gif image before any other images are loaded from the css

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

What is the process for applying the source from an object while utilizing video-js?

Guide on setting up the installation process of Gulp jshint with npm?

Use PHP to transform an array into JSON format, then access and retrieve the JSON data using either jQuery or JavaScript

Issues with Three.js raycaster intersectObjects

The process of generating vue-cli-plugin-prerender-spa encountered an issue where the error was not found within the

What is the best way to set a default value for a specified Date format retrieved from an API?

What is the best way to access the URLs of files within a Google Drive folder within a React application?

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

Issues with loading an external CSS file in an HTML document

Retrieving a JSON object using a for loop

Steps for displaying a loading image during the rendering of a drop-down list (but not during data loading):

What is the best way to calculate the sum of table data with a specific class using jQuery?

The lack of intellisense in VS Code for Node.js poses a significant challenge for developers