Challenges Associated with Promises in JavaScript

Question

Challenges Associated with Promises in JavaScript

I'm having trouble with the last line of code in my program and I need some help figuring out how to fix it. Specifically, I know that the second "then" statement needs to return resolve() but I'm not sure how to go about implementing this. Any tips or suggestions would be greatly appreciated!

let getNumber = new Promise((resolve) => {
    //API call
    EthereumNote.getAmountOfMyNotes(function(error, result) {
        if (!error) {
            let AmountOfMyNotes = Number(result)
            resolve(AmountOfMyNotes)
            console.log(result)
        } else
            console.error(error)

    })
}).then(result => {
    return new Promise((resolve) => {
        for (let i = 0, p = Promise.resolve(); i < result; i++) {
            p = p.then(_ => new Promise(resolve => {
                //Another API call
                EthereumNote.getMyNote(i, function(error, result) {
                    if (!error) {
                        let text = String(result[0])
                        let noteID = Number(result[1])
                        console.log(text)
                        console.log(noteID)
                        resolve()
                    } else
                        console.error(error)
                })
            }));
        }
    })
}).then(() => console.log('Hi!')) // Having trouble with this part

javascript ecmascript-6 es6-promise

Answer 1

Answer №1

Avoid falling into the trap of using the Promise constructor antipattern. It's fine to create a new promise to encapsulate EthereumNote.getMyNote, but be cautious about wrapping it in a loop without ever resolving the outer promise.

Instead, simply return the chain of promises created in p:

let getNumber = new Promise((resolve) => {
    //API
    EthereumNote.getAmountOfMyNotes(function(error, result) {
        if (error) reject(error);
        else resolve(Number(result));
    })
}).then(amountOfMyNotes => {
    console.log(amountOfMyNotes);
    var p = Promise.resolve();
    for (let i = 0; i < amountOfMyNotes; i++) {
        p = p.then(_ => new Promise((resolve, reject) => {
            //API
            EthereumNote.getMyNote(i, function(error, result) {
                if (error) reject(error);
                else resolve(result);
            });
        })).then(result => {
            let text = String(result[0])
            let noteID = Number(result[1])
            console.log(text)
            console.log(noteID))
        });
    }
    return p;
}).then(() => {
    console.log('Hi!'); // this one now works
}, err => {
    console.error(err);
});

Answer 2

Avoid falling into the trap of using the Promise constructor antipattern. It's fine to create a new promise to encapsulate EthereumNote.getMyNote, but be cautious about wrapping it in a loop without ever resolving the outer promise.

Instead, simply return the chain of promises created in p:

let getNumber = new Promise((resolve) => {
    //API
    EthereumNote.getAmountOfMyNotes(function(error, result) {
        if (error) reject(error);
        else resolve(Number(result));
    })
}).then(amountOfMyNotes => {
    console.log(amountOfMyNotes);
    var p = Promise.resolve();
    for (let i = 0; i < amountOfMyNotes; i++) {
        p = p.then(_ => new Promise((resolve, reject) => {
            //API
            EthereumNote.getMyNote(i, function(error, result) {
                if (error) reject(error);
                else resolve(result);
            });
        })).then(result => {
            let text = String(result[0])
            let noteID = Number(result[1])
            console.log(text)
            console.log(noteID))
        });
    }
    return p;
}).then(() => {
    console.log('Hi!'); // this one now works
}, err => {
    console.error(err);
});

Challenges Associated with Promises in JavaScript

Answer №1

Similar questions

Using Jquery to input selected dropdown values into a text input field

How come my dynamic source path doesn't function correctly unless I add an empty string at the end of it?

Passing an array of selected values from Vue.js to a text area and adding them to the existing content

Access nested objects in Javascript (Vue)

Display options in Material-UI autocomplete only upon clicking the icon

Where can I locate a specific child element in this scenario?

Invalid element type detected. A string was expected, but instead found undefined

How can you loop through keys and values in a JSON object using JavaScript?

Bootstrap typehead not activating jQuery AJAX request

Exploring JSON objects within other JSON objects

Retrieving the link to share for every video located in the Dropbox folder

default selection in AngularJS select box determined by database ID

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

I'm having an issue where whenever I click on a different page, I keep getting redirected back to the first page

Identifying a specific field in a dynamically generated React.js component: Best practices

Is it possible to dynamically load a specific div when the page loads, relying on the

Encountered an issue while trying to use Figma's spellchecker extension

css failing to load properly following javascript redirection

Developing a dynamic horizontal bar chart in d3 using a multidimensional array or nested JSON dataset

Tips for maintaining a healthy balance of tasks in libuv during IO operations