[SOLVED] Simultaneous Ajax requests calls running on the same page, is it possible?

1

The reason it is that it is a travel APP and I have to run three Ajax request on one page. Now it runs one Ajax request at the time to continue with the second one and so…

The reason to think about running all three calls at the same time it is because, for instance one api call gives a faster response than another api call and so…

So I want to load first the one that load first, not waiting for the first Ajax call to finish to continue with the second call…

The faster to load the faster to show and display it…

Any ideas to accomplish three or more simultaneous Ajax calls without having to wait a first call to finish to continue with the next… and not losing the requests tries individually when errors appears?

2

Ajax stand for: ( Asynchronous JavaScript and XML )
As you can see Asynchronous is part of the name. soy you can make as many calls as you need. And they will be called Asynchronous.
Maybe you have async: false as a param?
can you show your code of this calls?

1 Like
3

I have not even set the async parameter to false or true… I think I must add it to the request…

here my sample of one call:

  app.request({
            headers: {
              'Authorization': token
            },
            url: 'urlpath',
            dataType: 'json',
            method: 'POST',
            tryCount: 0, //starting request,,,
            retryLimit: 5, //no of retries...
            timeout: 30000, //must set so it doesnt request forever, between trials...
            data: data,
            crossDomain: true,
            statusCode: {
              404: function(xhr) {
                console.log('not found');
              },
              500: function(xhr) {
                console.log('syntax error!');
              }

            },
            beforeSend: function() {
              console.log('beforeSend');
            },
            complete: function() {
              console.log('complete');
            },
            success: function(data) {
              console.log('success');

              setTimeout(function() {
                self.$setState({
                  offers: data,
                });
              }, 100);
4 
async: true,

I just add it and put every call inside a different function and works flawless now…

function getData1() {

          app.request({
            headers: {
              'Authorization': token
            },
            url: 'urlpath1',
            dataType: 'json',
            async: true,
            method: 'POST',
            tryCount: 0, //starting request,,,
            retryLimit: 5, //no of retries...
            timeout: 30000, //must set so it doesnt request forever, between trials...
            data: data,
            crossDomain: true,
            statusCode: {
              404: function(xhr) {
                console.log('not found');
              },
              500: function(xhr) {
                console.log('syntax error!');
              }

            },

            success: function(data) {
              console.log('success');
              console.log(data);

              setTimeout(function() {
                self.$setState({
                  data1: data,
                });
              }, 100);
...
}

function getData2() {

          app.request({
            headers: {
              'Authorization': token
            },
            url: 'urlpath2',
            dataType: 'json',
            async: true,
            method: 'POST',
            tryCount: 0, //starting request,,,
            retryLimit: 5, //no of retries...
            timeout: 30000, //must set so it doesnt request forever, between trials...
            data: data,
            crossDomain: true,
            statusCode: {
              404: function(xhr) {
                console.log('not found');
              },
              500: function(xhr) {
                console.log('syntax error!');
              }

            },

            success: function(data) {
              console.log('success');
              console.log(data);

              setTimeout(function() {
                self.$setState({
                  data2: data,
                });
              }, 100);
...
}

getData1();
getData2();

working great… the fast to response, the faster to show…
thanks for the ideas!