How to make JavaScript function wait for promise resolution?

General Discussions
,
#1

How can I make my JavaScript function wait for a promise to finish before returning a variable? I’m currently working with promises and making progress, but I still struggle with their asynchronous nature. I have a simple function that queries a Parse database, and I want it to return an array of results. However, due to the asynchronous nature of the query, the function returns before the results are available, leaving me with an undefined array.

What do I need to do to ensure that this function waits for the promise to resolve?

Here’s my code:

function resultsByName(name) { var Card = Parse.Object.extend("Card");
var query = new Parse.Query(Card);
query.equalTo("name", name.toString());
var resultsArray = [];
var promise = query.find({
success: function(results) {
console.log(results);
return results;
},
error: function(error) {
console.log("Error");
}
}); }

I’m looking for guidance on how to effectively use javascript wait for promise techniques to achieve this.

#2

You know, I have quite a bit of experience working with asynchronous JavaScript, and I’d recommend using async/await. It simplifies your code and makes it look synchronous, which can really help with readability. Here’s how you can modify your function:

async function resultsByName(name) {
    var Card = Parse.Object.extend("Card");
    var query = new Parse.Query(Card);
    query.equalTo("name", name.toString());
    try {
        const results = await query.find(); // Wait for the promise to resolve
        console.log(results);
        return results; // Now returns the resolved value
    } catch (error) {
        console.log("Error:", error);
        return []; // Return an empty array or handle the error appropriately
    }
}
#3

Hey Shielagaa

That’s a solid approach, Yanisleidi! If you’re not keen on using async/await, another option is to return the promise directly from your function. This way, you can handle the results right where you call the function, making your code a bit more flexible. Here’s how you can do that:

function resultsByName(name) {
    var Card = Parse.Object.extend("Card");
    var query = new Parse.Query(Card);
    query.equalTo("name", name.toString());
    return query.find() // Return the promise directly
        .then(function(results) {
            console.log(results);
            return results; // Returns the resolved value
        })
        .catch(function(error) {
            console.log("Error:", error);
            return []; // Return an empty array or handle the error appropriately
        });
}

// Usage:
resultsByName('exampleName').then(function(results) {
    console.log("Results:", results);
});

Also, just a note: when working with promises, think about using a javascript global variable if you need to access results elsewhere.

#4

Those are both great methods! If you want a different style, you could consider using a callback function. While it’s less common in modern JavaScript, it’s still valid and can be useful in certain scenarios. Here’s how you could implement it:

function resultsByName(name, callback) {
    var Card = Parse.Object.extend("Card");
    var query = new Parse.Query(Card);
    query.equalTo("name", name.toString());
    query.find()
        .then(function(results) {
            console.log(results);
            callback(results); // Call the callback with the results
        })
        .catch(function(error) {
            console.log("Error:", error);
            callback([]); // Call the callback with an empty array or handle the error
        });
}

// Usage:
resultsByName('exampleName', function(results) {
    console.log("Results:", results);
});

This approach might be useful if you want to handle the results right after the query completes without chaining .then() directly. Just remember, when using this method, consider managing javascript global variable references wisely to avoid conflicts