Question posted in
You can find the official documentation here.

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

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
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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
   }
}

  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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();
    });
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search