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

admin管理员组

文章数量:1424916

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?

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 piled:

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();
    pile_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();
    pile_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.

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?

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 piled:

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();
    pile_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();
    pile_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.

• javascript
• ajax
• asynchronous

Share Improve this question Follow edited Apr 21, 2016 at 20:14 agent provocateur asked Apr 21, 2016 at 18:19 agent provocateuragent provocateur 83044 gold badges2020 silver badges4040 bronze badges 7

• 2 Try Promise.all or $.when in jQuery. – elclanrs Commented Apr 21, 2016 at 18:20
• My answer to a recent question might help. – Andy Commented Apr 21, 2016 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 Commented Apr 21, 2016 at 18:33
• @kakurala i tried that with a global array... but not object. – agent provocateur Commented Apr 21, 2016 at 18:35
• 1 @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 Commented Apr 21, 2016 at 18:37

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

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

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

$.ajax('http://example1.') 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.

本文标签：