AngularJS : multiple asynchronous AJAX calls

Question

I am calling multiple ajax calls but the code only reaches the API after all the ajax calls are executed.

Javascript:

 function test = function(){
        var entity = {};
        entity.Number = 1;
        appFactory.testPostCall(entity, 'ApiController/TestMethod');

        entity.Number = 2;
        appFactory.testPostCall(entity, 'ApiController/TestMethod');
    }

AppFactory

factory.testPostCall = function (number, appendUrl) {
        var q = $q.defer(); 

        $http({
            method: "POST",
            url: url + appendUrl,
            data: number
        }).success(function (data, status, headers, config) { 
            q.resolve(data);
        }).error(function (data, status, headers, config) {
            q.reject(data); 
        });
        return q.promise;
    }

API

[HttpPost]
        public Nullable<int> TestMethod(TestEntity entity)
        {
            return entity.Number;
        }

I traced how to code runs by breakpoints. calling test() function executes the following:

javascript -> appFactory
javascript -> appFactory
API
API 
//with the parameter Entity having the value Entity.Number = 2 for both API calls.

I tried placing a breakpoint at

entity.Number = 2;

and wait till the API is called but it seems that the code is waiting for the function to end until the API is called. I am so confused on the behavior of this, I am actually expecting something like the following:

javascript -> appFactory -> API //entity.Number = 1

javascript -> appFactory -> API //entity.Number = 2

Chaining works well but I need to run both independently and I really want to understand whats happening.

    entity.Number = 1;
            appFactory.testPostCall(entity, 'ApiController/TestMethod')
.then(function(data){
            entity.Number = 2;
            appFactory.testPostCall(entity, 'ApiController/TestMethod');
    });

Thank you!!!

Community · Accepted Answer · 2017-05-23 12:29:32Z

1

You're passing entity to your function in both guesses. Guess what? In JS, all objects are passed by reference and not by copy. Similar questions are all over SO: Why isn't this object being passed by reference when assigning something else to it?

You have two possibilities to have the behaviour you expect:

You can use a closure to make sure that the parameter is passed as you would like
You can shallow-copy your object

I would personally go towards a third option, however, which consists in not blindly passing an object to your API.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Mar 9, 2015 at 11:25

Sébastien Renauld

19.8k2 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ElementaryStudentProgramming Over a year ago

Hey that's one eye opener for me O_O thanks! One less problem for me, the API now receives 1 and 2. Now the only problem is that the API calls are only called after the whole function is executed.

Sébastien Renauld Over a year ago

@ElementaryStudentProgramming: That is the purpose of a Promise. It's non-blocking, async.

ElementaryStudentProgramming Over a year ago

I'm not quite getting it, if it's "non-blocking", shouldn't the first appFactory.testPostCall(entity, 'ApiController/TestMethod'); reach the API the moment it is called? What's happening instead is that the code waits for the whole javascript function to be executed before the code reaches the API.

Sébastien Renauld Over a year ago

@ElementaryStudentProgramming: Nope. If you'd like an analogy, appFactory.testPostCall immediately returns, but keeps working on in the background. That's the closest I can get to what actually happens in under 400 characters. If it didn't do that, then it'd be blocking.

ElementaryStudentProgramming Over a year ago

Oh I see, thank you so much! I'm just wondering why it still waits for the whole function to be executed before it runs the API. The behavior on my "GET" calls goes as expected javascript -> appFactory -> API . Anyway thank you so much!

|

Collectives™ on Stack Overflow

AngularJS : multiple asynchronous AJAX calls

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related