How to make ajax synchronous instead of using async:false?

Question

I'm having some problems with the ajax async. I have an array then loop through the array to make an ajax call, if success the ajax will return an xml string, i'll use it to fill in an table and update process bar. I use async:false it works fine on Firefox, but it's not work properly on Chrome. I also tried to use $.ajax().done(), but it's not affect at all.

Is there anyway to get the responsed xml string when ajax call finish then the next loop will run?

for (var i = 0; i <= arr.length; i++){
    $.ajax({
        url: '',
        data: '',
        async: false
    }).done(function(xml) {
       //get xml string to handle and put it into some table as contents
    });
    //Then go to next loop
}

Truly synchonous AJAX is deprecated, and for good reason. Nothing should ever block the UI thread. Read into `async`/`await` and `await` the call. Note that [it still won't be synchronous, and will never be, and you need to adjust the remaining code accordingly](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — CherryDT, Aug 05 '20 at 08:09
Using `await` here is distinctly suboptimal: There's no dependency of request 2 on request 1 so running them serially instead of in parallel will just be slow. — Quentin, Aug 05 '20 at 08:23
I have tried using async/await, and it's really helpful to solve my problem. Thanks so much @CherryDT — Steven Dang, Aug 06 '20 at 06:47

score 5 · Answer 1 · answered Aug 05 '20 at 08:17

5

Don't try to make asynchronous code synchronous. You will lock up the event loop and get a nasty performance penalty.

Make the requests in parallel. Collect the promises in an array. Use Promise.all to determine when they have all completed.

Then you can extract the data from them and do what you will with it.

For example:

const baseUrl = "https://jsonplaceholder.typicode.com/users/";
const userIds = [1,2,3,4,5];

const completeUrls = userIds.map( id => `${baseUrl}${id}` );
const promises = completeUrls.map( url => jQuery.ajax({url}) );
const collectedDataPromise = Promise.all(promises);

collectedDataPromise.then( data => {
    const names = data.map( user => user.name );
    const ul = $("<ul />");
    names.forEach( name => {
       ul.append( $("<li>").text(name) );
    });
    $("body").append(ul);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Aug 05 '20 at 08:17

Quentin

914,110
126
1,211
1,335

the data to post not only contain the id as your example, it's contain like a string of GET as params – Steven Dang Aug 05 '20 at 08:25
@StevenDang — As you said, this is just an example. The specifics of what the requests look like isn't relevant. – Quentin Aug 05 '20 at 08:26
So if i try this way, i don't have to use the ````for```` anymore, right? – Steven Dang Aug 05 '20 at 08:28
Correct. This uses `map` to perform the iteration (and put the results in an array). – Quentin Aug 05 '20 at 08:29
Finally, i decied to use async/await to solve problem as i answered above :D – Steven Dang Aug 06 '20 at 06:48

Pranav Rustagi · Answer 2 · 2020-08-05T08:24:15.227

-1

If you have to update data in each iteration, you can use some string and update in in .done().

Try it with recursion like this:

var counter = arr.length;

function callAjax() {
  if (counter) {
    $.ajax({
      url: '',
      data: ''
    })
    .done(function(xml) {
      //get xml string to handle and put it into some table as contents
      counter--;
      callAjax();
    });
  }
}

edited Aug 05 '20 at 08:24

answered Aug 05 '20 at 08:23

Pranav Rustagi

2,604
1
5
18

The question explicitly wanted to avoid `async: false` – Quentin Aug 05 '20 at 08:24
@Quentin I am sorry, I pasted the ajax call as it was in the question. The code I updated should work, asynchronously. – Pranav Rustagi Aug 05 '20 at 08:26

score -1 · Answer 3 · answered Aug 05 '20 at 09:21

Finally, i got my own solution that i use the async/await to make sense.

async function ajaxGetData(){
    return $.ajax({
               url: '',
               data: ''
          }).then(response => response.data);
}

async function hanldeResponse(){
   var arr = [1,2,...];
   for(var i = 0; i < arr.length; i++){
       let res = await ajaxGetData();
       //some code to handle the response with res variable
   }
}

How to make ajax synchronous instead of using async:false?

3 Answers3