CODEWITHSUNDEEP
javascriptajaxasynchronous
agent provocateur
agent provocateur

Reputation: 830

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

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:

  1. Successfully making the separate AJAX requests and gathering data separately.
  2. (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?

enter image description here

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.

Upvotes: 1

Views: 5157

Answers (1)

Emil Oberg
Emil Oberg

Reputation: 4056

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.

Upvotes: 5

Related Questions