reason for executing another function when ajax calling

Question

I am working on a project where there is a page having a input field named balance and the div containing this field is balanceDiv.for admin this field will not show.so i use ng-show to hide/show that div,wrote function in angular controller (one for collecting loginId and another one for hide or show div according to that login id).the condition for show or hide that div is--- if admin found(id 1) div will hide otherwise div will show.To do that i notice that when calling ajax-- execution switching to second function.In my angular controller--

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

you can see that first it will execute setLoginId then it will go for showHide (As i expected).The two functions---

    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;
        }
    }

what i have noticed is that when it is executing the ajax call in setLoginId method after that without getting the response (or completting the method) it goes for showHide method.After completing showHide method it again return in setLoginId method.Then it execute the rest of the method instruction.Result is that i am getting undefined value for $scope.loginId in showHide method.

I want to know why this happens? why execution switching to another method when ajax calling?

Simple answer, AJAX is asynchronous. Consider a basic example where you are surfing a page on mobile 2G or bad 3G, if we do synchronous processing, user will have to wait for response and page will freeze until it. Would you like that behaviour? — Rajesh, Jan 01 '17 at 03:44
Possible duplicate of [What does Asynchronous means in Ajax?](http://stackoverflow.com/questions/3393751/what-does-asynchronous-means-in-ajax) — Rajesh, Jan 01 '17 at 03:47

georgeawg · Answer 1 · 2016-12-31T18:21:27.227

The functions need to chain:

    init();
    function init()
    {
        setLoginId().then(function(data) { 
            showHide(data);
        }).then(function () {
            initilize();
        });
    }

Be sure to return the promise for chaining:

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);
    });
}

Add data parameter:

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

By returning the promise, and using the .then method of the promise, the execution of the second function is delayed until the first XHR completes.

I want to know the reason

It is important to realize that the $http service immediately returns an unfulfilled promise and in parallel makes an asynchronous xmlHttpRequest (XHR) . The promise is later fulfilled (resolved or rejected) when the results come back from the server.

Code subsequent to an asynchronous API call is immediately executed. If code needs to be delayed until the completion of the XHR, it needs to be furnished as a function to the .then method of the promise.

For more information, see:

Are you seriously saying that you don't want a solution to your problem? — georgeawg, Dec 31 '16 at 17:39

reason for executing another function when ajax calling

1 Answers1