How to make multiple AJAX requests and use all results from each request when available?

Question

I am trying to make two or more separate AJAX requests simultaneously or in parallel.
When all requests are finished and returned data for all AJAX requests, I want to call a function with all of the data at once.

So far:

Successfully making the separate AJAX requests and gathering data separately.
(Successfully?) make 2 parallel AJAX requests but when I try to access all of the data at once or send all the data to a function I get undefined:

I have tried:

*Tried using the following style of AJAX:

function Ajax(handleData) {
    $.ajax({
        url: url,  
        type: 'POST',
        data: data_ajax,
        success:function(data) {
            handleData(data);
        },
        error: function(e){
            console.log(e.message);
        }
    });
}
Ajax(function(output){
    response_parsed = JSON.parse(output);
    do stuff like assign to global var
}

* Tried using the following style of AJAX:

get_array = (function(){
      var response_parsed;
      $.ajax({
         url: url,  
         type: 'POST',
         data: data_ajax,
         success:function(data) {
            response_parsed = JSON.parse(data);
         },
         error: function(e){
            console.log(e.message);
         },
      });
      return {getData : function()
      {
         if(response_parsed) return response_parsed;
      }};
   })();

where trying get_array.getData doesnt work out but get_array has the data in a closure?

How can I access the closure stuff?

So basically, I have a function that calls the separate AJAX requests (which are separate functions) and then on success its supposed to either assign that data to a global var or send that data off to get processed and compiled:

I tried assigning the response data to a global variable (I know everyone hates on global var) but I still couldnt use or pass that information to a function (undefined):

function start(){
    call_ajax1();
    call_ajax2();
    compile_data(data_array_from_request1, data_array_from_request2);
}

I tried returning the data on success.

function start(){
    data_array_from_request1 = call_ajax1();
    data_array_from_request2 = call_ajax2();
    compile_data(data_array_from_request1, data_array_from_request2);
}

Need some guidance...
Do I need to chain successes together somehow?

I found jQuery.when() recently but unsure if its what I am looking for.

Please let me know how to improve this question.

[My answer to a recent question](http://stackoverflow.com/questions/36776114/return-an-array-from-an-async-call-then-additional-async-calls-for-each-element/36776686#36776686) might help. — Andy, Apr 21 '16 at 18:22
Try defining a global scope empty object and whenever Ajax returns data then assign to it as `myobj.ajax1 = data` and do same thing in other call as well. — kakurala, Apr 21 '16 at 18:33
@kakurala i tried that with a global array... but not object. — agent provocateur, Apr 21 '16 at 18:35
@kakurala Polluting the global scope that way is not only unnecessary, it's a bad idea. See e.g. http://stackoverflow.com/questions/8862665/what-does-it-mean-global-namespace-would-be-polluted — Emil Oberg, Apr 21 '16 at 18:37
@kakurala no, this is not the way to go. Use `Promise.all` or `Promise.spread` e.g. in bluebird - or in almost any promise framework. — Ioan, Apr 21 '16 at 18:37
Yes understood, but it is sort of easy solution, since terminologies like promise ,differed are quite confusing for newbies until unless they understand the beauty of it. And if you use global scope gently without pouring all the stuff in there, its fine. — kakurala, Apr 21 '16 at 18:53

Emil Oberg · Accepted Answer · 2016-04-21T18:31:10.480

5

As you're mentioning jQuery. It can easily be solved as such:

$.when(
    $.ajax('http://example1.com'),
    $.ajax('http://example2.com')
)
.then(function(response1, response2) {
    console.log(response1);
    console.log(response2);
})
.fail(function(err) {
    console.log('Something went wrong', err);
});

$.ajax('http://example1.com') can of course be more advanced ajax calls, such as the one in your original post:

$.when(
    $.ajax({
        url: url1,
        type: 'POST',
        data: data_ajax
    }),
    $.ajax({
        url: url2,
        type: 'POST',
        data: data_ajax
    })
)
.then(...)

Also see the jQuery documentation on .when which also explains how to handle errors.

edited Apr 21 '16 at 18:31

answered Apr 21 '16 at 18:27

Emil Oberg

4,006
18
30

ill give it a try! – agent provocateur Apr 21 '16 at 18:29
can I use functions that initiate the ajax requests in the $.when? do I have to return the actual $.ajax from the function to make that work? – agent provocateur Apr 21 '16 at 18:35
1

I don't really understand your question but `$.when` will take any `promise`. The `ajax` method returns a promise. If you want to do e.g. `function something() { return $.ajax('http://www.example.com'); }` and then `$.when(something)` that's perfectly fine. – Emil Oberg Apr 21 '16 at 18:43
You might want to read an introduction to promises, e.g. https://davidwalsh.name/promises Just be aware: jQuery has its own non standard compliant implementation of Promises so you want to take a look at the jQuery documentation once you get a hang of it. – Emil Oberg Apr 21 '16 at 18:44

How to make multiple AJAX requests and use all results from each request when available?

So far:

I have tried:

1 Answers1