How can I prioritize specific ajax call?

Question

I have two ajax based methods which are executing after each 10 seconds. But I have one more thing which is form submission. Right now when I submit the form to process then it's wait for previous triggered ajax calls to complete and then processing. I would like to prioritize it.

Following script I have

function refresh_ss_one(){
    $.ajax({
       type: 'GET',
       url: "{{ route('RefreshSessionOne') }}",
       data: {}, 
       success: function(response){ 
        console.log(response);
       }
    });
}
function refresh_ss_two(){
    $.ajax({
       type: 'GET',
       url: "{{ route('RefreshSessionTwo') }}",
       data: {}, 
       success: function(response){ 
        console.log(response);
       }
    });
}
setInterval(refresh_ss_one, 10000);
setInterval(refresh_ss_two, 10000);

I have one more which is executing on form submit event and I would like to prioritize it. I have gone through async ajax parameters and used in my ajax function but still facing the issue.

$("#check-rate").submit(function(e) {
    var form_data = $(this);
    $.ajax({
           type: 'POST',
           url: currency_route,
           data: form_data.serialize(), 
           success: function(response)
           {
              ...
           }
         });
    e.preventDefault(); 
});

Can someone kindly guide me how can I fix this issue..

this shouldn't be happening..... it should not wait for the other calls to complete. — Rohit Goyal, May 14 '19 at 09:16
If I get it correctly you want to execute the ajax calls in sequence. For this you can call the second call in the success function of the first one an so on or go with the promise way. For reference [How to chain ajax calls using jquery](https://stackoverflow.com/questions/8612894/how-to-chain-ajax-calls-using-jquery) — Andrea, May 14 '19 at 09:18
The ajax requests are independent and one doesn't wait for another request to finish unless the browser has reached the max limit of simultaneous requests that can be made to same host (The max limit varies across the browsers) — tgvrs santhosh, May 14 '19 at 09:19

Jayoti Parkash · Answer 1 · 2019-05-14T10:05:35.423

0

you can try in this way:

<script>
// write your ajax function like
$.ajax({
    type: 'GET',
    url: "{{ route('RefreshSessionOne') }}",
    data: {},
    async: false,
    success: function(response) {
        console.log(response);
    }
});

// First complete this request,then go for other codes

$.ajax({
    type: 'GET',
    url: "{{ route('RefreshSessionTwo') }}",
    data: {},
    success: function(response) {
        console.log(response);
    }
});

// Executed after the completion of the previous async:false request.

By default, the $.ajax request in jquery is set to asynchronous. The variable name is async and the value is set to true.

Or you can call the second function in the success part of first function.

edited May 14 '19 at 10:05

answered May 14 '19 at 09:18

Jayoti Parkash

868
11
26

`(async: false)` what kind of JS syntax is this? – Roko C. Buljan May 14 '19 at 09:52
@RokoC.Buljan I just added a sample, you need to write the code with all properties of ajax request. – Jayoti Parkash May 14 '19 at 09:54
than a *"sample"* would look better like this: `({async: false, ...})` – Roko C. Buljan May 14 '19 at 09:57

score 0 · Answer 2 · answered May 14 '19 at 09:32

I'd try a more modern approach. Use a promise:

var promise1 = new Promise(function(resolve, reject) {
   //first ajax call here
});

promise1.then((value) => {
//second ajax call here
});

Here's the documentation for it

What the promise will do is ensure to run the first part of your code (your first ajax call here and you can set resolve in success of the ajax call, and then it will run the second one.

P.S. You can have as many of them as you want.

Roko C. Buljan · Answer 3 · 2019-05-14T13:23:22.783

To sequentially get responses from a list of GET / POST requests, here's how you could approach your problem using jQuery Deferreds

const $ajaxSeq = arr => $.when.apply($, arr.map(data => $.ajax(data))).then(function(_res){ 
     return Array.isArray(_res) ? [].map.call(arguments, res => res[0]) : [_res];
  });

Use like:

$ajaxSeq([
    {type:'POST', url:'some_url_here', data: {content: "Hello world"}},
    {type:'GET',  url:'some_url_here'},
    {type:'GET',  url:'some_url_here'},
]).then( res => {
    // Once all requests are fulfilled
    // access the desired response in order:
    console.log(res[0])
    console.log(res[1])
    console.log(res[2])
});

score -1 · Answer 4 · answered May 14 '19 at 09:27

AJAX calls do what it says. It makes the requests asynchronous. So by definition 1 request does not wait for the other request to be completed. You can make this as async:false as @jayoti said above. But more than that, you should have a single method method which calls the other 2 method and you can call the 2nd method when you receive the response.

How can I prioritize specific ajax call?

4 Answers4