At what point does the promise's then function transition to being either fulfilled or rejected?

When dealing with promises in JavaScript, the then() method returns a promise that can be in one of three states: pending, fulfilled, or rejected. You can create a promise using the resolved and rejected methods to indicate when it should be fulfilled or rejected. However, sometimes using these methods within functions in the then() chain can be tricky, especially when working with normal asynchronous functions that have callbacks. Take the following example:

        User.findOne({
            where: {
                email: email
            }
        }).then(function(user){
            if(user){
                return done(null, false, req.flash('signupMessage', 'That email is already taken.'));
            }else{
                var user = User.build({ email: email });
                console.log("ONE");
                User.generateHash(password, function(err, hash){
                    console.log("TWO");
                    if(err){
                        return done(err);
                    }else{
                        user.password = hash;
                        var newUser = user.save();
                        return newUser;
                    }
                 })
             }
          }, function(err){
            console.log("ERROR: ", err);
         }).then(function(newUser){
            console.log("THREE");
            return done(null, newUser);
          }, function(err){
             console.log("USER NOT CREATED: ", err);
           });

In this scenario, User.findOne() returns a promise that causes the console output to be ONE THREE TWO due to the asynchronous nature of the code execution. If you want to control when the second then statement gets executed, you may need to adjust your approach by properly handling the flow of promises in your code.

Although there are multiple ways to resolve this issue, understanding why and when the promise returned by the first statement becomes fulfilled is crucial for improving the overall performance and reliability of your code.

Answer №1

What actually occurs is that the function findUser is executed successfully (not rejected), so the first argument callback in the .then() method is triggered instead of the second.

Within the .then() block, you call console.log("ONE") and don't return anything because you end up in the else { block where a return statement is missing, resulting in an output of undefined.

Following this, the subsequent .then() method is invoked, leading to the execution of console.log("THREE").

At some later point in time, the callback from createHash is triggered, causing console.log("TWO") to be displayed.

A more appropriate approach would have been to structure User.generateHash such that it also returns a promise. This way, you could easily chain it with the rest of the promise sequence without having to manage asynchronous operations within the promise callback.

Answer №2

When initiating a promise, you can utilize the resolved and rejected methods to determine whether the promise should be fulfilled or rejected. However, it may not be apparent how to apply these methods within functions called in the then() method.

Upon employing the then method on a promise, the resolve/reject callbacks are not directly accessible - the then function handles this internally. Instead, it provides a new promise that will resolve with the return value of your callback. If the return value is a promise, it will be automatically processed (resolved or rejected) based on the outcome of that promise.

To address this scenario, it is essential to create a promise for the callback function within the then block, which can then be returned. Ideally, one can pre-convert the callback into a promise using promisify techniques, but alternatively, the Promise constructor can also be used (providing access to resolve/reject).

    User.findOne({
        where: {
            email: email
        }
    }).then(function(user){
        if (user){
            throw new Error('That email is already taken.');
        } else {
            var user = User.build({ email: email });
            console.log("ONE");
            var promise = new Promise(function(resolve, reject) {
//                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                User.generateHash(password, function(err, hash){
                if (err) reject(err);
                else     resolve(hash);
            });
            return promise.then(function(hash) {
                console.log("TWO");
                user.password = hash;
                var newUser = user.save();
                return newUser;
            });
        }
    }).then(function(newUser){
        console.log("THREE");
        return done(null, newUser);
    }, function(err){
        console.log("ERROR: ", err);
        return done(null, false, req.flash('signupMessage', err.message));
    });

Answer №3

Assuming that done() and User.generateHash() do not return promises, the 2nd level of this program can proceed without delay to the next then() block.

In order to address this issue or to ensure that your print statements display ONE TWO THREE, consider making the following adjustments:

User.findOne({
    where: {
        email: email
    }
}).then(function(user){
    var promise;
    if(user){
        promise = done(null, false, req.flash('signupMessage', 'That email is already taken.'));
    }else{
        var user = User.build({ email: email });
        console.log("ONE");
        promise = User.generateHash(password, function(err, hash){
            return new Promise(function(resolve, reject){
                console.log("TWO");
                if(err){
                    reject(done(err));
                }else{
                    user.password = hash;
                    var newUser = user.save();
                    resolve(newUser);
                }
            });
        });
    }

    return promise;
}, function(err){
    console.log("ERROR: ", err);
}).then(function(newUser){
    console.log("THREE");
    return done(null, newUser);
}, function(err){
    console.log("USER NOT CREATED: ", err);
});

In this manner, the initial then block will pause until the promise is fulfilled before proceeding to the subsequent then block. This ensures that User.generateHash must resolve before advancing to the next then block as the variable promise relies on it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

It appears that Vivus JS is having difficulty animating specific <path> elements

I've been experimenting with the Vivus JS library, which is fantastic for animating paths such as drawing an image. However, I'm facing an issue where my SVG icon should animate to a 100% line-width, but it's not working as expected. Interes ...

Attempting to convert PHP tables into PDF format by utilizing jsPDF-auto-table to generate a beautifully structured PDF file containing the results of a PHP query with multiple records

I'm new to stackoverflow but I find myself visiting it regularly for helpful tips. I've taken some code from the simple.html file that comes with the jsPDF auto-table plugin. However, I'm having trouble making it work with data generated by ...

Update breadcrumbs dynamically by clicking on each horizontal panel

I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simul ...

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

To achieve the desired format, where should I press or manipulate the information?

I need help with manipulating arrays to generate a specific JSON file structure. I've made some progress but got stuck at this point: var T_nn_IN = document.getElementById('datatablenewname'); var tabledata_newname_initialname = []; ...

Tips for changing the TextField variant when it receives input focus and keeping the focus using Material-UI

When a user focuses on the input, I'd like to change the variant of the TextField. The code snippet below accomplishes this, but the input loses focus. This means the user has to click again on the input to focus and start typing. import React, { useS ...

Access information from JSON file

Looking to extract data from an external JSON file and store it in a JavaScript array for manipulation? Here is a snippet of the JSON file for reference: "Country":[ { "Country_Name":"India", "Country_Details":[ { ...

How to sync two carousels in Bootstrap 5 to slide simultaneously with just one click on the next and previous buttons

I am trying to implement dual sliding carousels using Bootstrap 5, but I am encountering issues with getting them to slide simultaneously. Despite incorporating data-bs-target=".carousel", the synchronization isn't working as intended in my ...

Utilizing asynchronous false in Wordpress Ajax functionality

Is there a way to use the AJAX return value outside the function in WordPress? For example: function get_login_member($) { $.post(ajax_object.ajax_url, {action: 'getloginmember'}, function (data) { data = JSON.parse(data); ...

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Experimenting with a combination of vue.js and vanilla to create a blackjack game. The card data is stored in the vue data() like this: data(){ return { cards: [ {id: 1, cardName: 'Ace of Spades', cardPic: ' ...

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

Tips to prevent modal impacts on underlying elements?

When I click on a button, a modal pops up. However, the background contents seem to spread out and sometimes scroll automatically when the modal appears. I have searched for a solution to this issue but have been unsuccessful. Can anyone please help me ide ...

Converting a JSON array to C# and vice versa in Xamarin Forms

I've been struggling to send a C# object as JSON array to an API endpoint. I feel like I'm going crazy trying to solve these issues. Here's a sample of the JSON data: Array ( [user_id] => 0002323445635 [order] => {"order":{" ...

What strategies can be used to refactor nested callbacks in node and effectively pass parameters to each function within the callbacks?

I am currently in the process of refactoring some JavaScript code within a Node environment, and I'm encountering difficulties when it comes to passing parameters to functions that serve as callbacks for other functions. Here is an example of my curre ...

What causes async / await function to be executed twice?

I am currently developing a node.js application using express. In this project, I have implemented a regular router that performs the following tasks: It searches for the myID in the DB, If the myID is found, it attempts to execute the addVisit() functio ...

Include a .done() callback within a customized function

In the small class, I have included these functions: var Ajax = { // Send new entry data to database endNewEntry: function (json) { $.post("/controllers/insertEntry.ajax.php", {"json": json}); }, loadView: function (view, target, extra) { ...

Refresh ng-repeat following data entry or push in Angular Material dialog

Currently, I am facing an issue with adding a new object to an ng-repeat array. The array is populated with data fetched through an $http request. My goal is to input data in a dialog and pass it to a function that will then add the data as an object to th ...