Purpose of triggering another function during an ajax request

Question

Purpose of triggering another function during an ajax request

I have encountered an issue while working on a project. There is a page with an input field called balance within a div named balanceDiv. This field should not be visible to the admin, so I used ng-show to hide/show the div based on the user's login ID. I wrote two functions in the Angular controller - one for retrieving the login ID and another for showing or hiding the div based on that ID. The condition is that if the login ID is 1 (admin), the div will be hidden; otherwise, it will be shown.

        init();
        function init()
        {
            setLoginId();
            showHide();
            initialize();
        }

Initially, the setLoginId function is supposed to execute first followed by showHide function. However, what I observed was that the execution jumps to the showHide function when making an AJAX call.

    function setLoginId()
    {
        var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
        var result = CrudService.getAll(apiRoute);
        result.then(function (response) {
            debugger
            $scope.loginId = response.data;
        },
        function (error) {
            console.log("Error: " + error);
        });
    }
    
    function showHide() {
        if ($scope.loginId == 1) {
            $scope.balanceDiv = false;
        }
        else {
            $scope.balanceDiv = true;
        }
    }

After calling the AJAX in setLoginId, the execution moves to showHide before the response is received, causing $scope.loginId to be undefined. Why is this happening? Why does the execution switch to another method during the AJAX call?

javascript angularjs ajax asynchronous httprequest

Answer 1

Answer №1

In order for the functions to be connected:

    initialize();
    function initialize()
    {
        setLoginId().then(function(data) { 
            showOrHide(data);
        }).then(function () {
            init();
        });
    }

Make sure to return the promise for linking them:

function setLoginId()
{
    var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
    var promise = CrudService.getAll(apiRoute);
    return promise.then(function (response) {
  //^^^^^^  return derived promise
        debugger
        $scope.loginId = response.data;
        //RETURN data to chain
        return response.data;
    },
    function (error) {
        console.log("Error: " + error);
    });
}

Include loginID as a parameter:

function showOrHide(loginID) {
    if (loginID == 1) {
        $scope.balanceDiv = false;
    }
    else {
        $scope.balanceDiv = true;
    }
}

By returning the promise, and using the .then method of the promise, the second function will only execute after the completion of the first XHR.

I am curious about the reason behind this

It is crucial to understand that the $http service promptly returns an unresolved promise and simultaneously initiates an asynchronous xmlHttpRequest (XHR) . The promise is later fulfilled (resolved or rejected) upon receiving results from the server.

The code following an asynchronous API call is executed right away. If there is a need to delay code execution until the XHR completes, it must be provided as a function to the .then method of the promise.

For further insight, refer to:

Answer 2

In order for the functions to be connected:

    initialize();
    function initialize()
    {
        setLoginId().then(function(data) { 
            showOrHide(data);
        }).then(function () {
            init();
        });
    }

Make sure to return the promise for linking them:

function setLoginId()
{
    var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
    var promise = CrudService.getAll(apiRoute);
    return promise.then(function (response) {
  //^^^^^^  return derived promise
        debugger
        $scope.loginId = response.data;
        //RETURN data to chain
        return response.data;
    },
    function (error) {
        console.log("Error: " + error);
    });
}

Include loginID as a parameter:

function showOrHide(loginID) {
    if (loginID == 1) {
        $scope.balanceDiv = false;
    }
    else {
        $scope.balanceDiv = true;
    }
}

By returning the promise, and using the .then method of the promise, the second function will only execute after the completion of the first XHR.

I am curious about the reason behind this

It is crucial to understand that the $http service promptly returns an unresolved promise and simultaneously initiates an asynchronous xmlHttpRequest (XHR) . The promise is later fulfilled (resolved or rejected) upon receiving results from the server.

The code following an asynchronous API call is executed right away. If there is a need to delay code execution until the XHR completes, it must be provided as a function to the .then method of the promise.

For further insight, refer to:

Purpose of triggering another function during an ajax request

Answer №1

Similar questions

The webkitTransitionEnd event fires prior to a repaint or reflow occurring

A DataTable featuring a contextual menu, the ability to make multiple selections, and the ability

What causes json.parse to malfunction? and how can you resolve the issue

Retrieve the unique identifier of the dynamically created button

Can you explain the concept of "excluded" in relation to project subdirectories on Webstorm?

Learn the process of dynamically adding new rows and assigning a distinct ng-model to each row

"Exploring the world of Mean.js with Node.js background functionalities

Finding the identification of the first element within a nested div using JQuery

Steps for aligning items in a column horizontally in Bootstrap 5

Encountered an error when creating my own AngularJS module: Unable to instantiate

Information not displaying correctly on the screen

What is the best way to fetch a partial JSON response object from an API using JavaScript?

The loading of the Bootstrap tagsinput has encountered an error

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

Bootstrap wysiwyg5 editor validation: Ensuring accuracy in your content creation

Tips for transferring information from an AngularJS application to a Spring controller

I am having trouble with json_encode in my Symfony2 controller

Various issues arising from a single input in Foundation Abide with AngularJS

Displaying empty values in the post via plupload data

An issue encountered with res.download() following res.render() in Node.js