Как сделать ajax синхронным вместо использования asyn c: false?

Question

У меня проблемы с ajax asyn c. У меня есть массив, затем l oop через массив, чтобы сделать вызов ajax, в случае успеха ajax вернет строку xml, я буду использовать ее для заполнения таблицы и обновления панели процесса. Я использую async:false, он отлично работает на Firefox, но не работает должным образом на Chrome. Я также пробовал использовать $.ajax().done(), но это никак не повлияло.

Есть ли способ получить ответную xml строку, когда ajax вызовите fini sh, тогда следующий l oop будет запустить?

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
}

Answer 1

Не пытайтесь сделать асинхронный код синхронным. Вы заблокируете событие l oop и получите неприятное снижение производительности.

Выполните запросы параллельно. Собирайте обещания в массив. Используйте Promise.all, чтобы определить, когда они завершили все .

Затем вы можете извлечь из них данные и делать с ними все, что захотите.

Например:

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>

Answer 2

Наконец, у меня есть собственное решение, в котором я использую async / await, чтобы иметь смысл.

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

Answer 3

Если вам нужно обновлять данные на каждой итерации, вы можете использовать некоторую строку и обновить в .done ().

Попробуйте это с рекурсией, например:

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();
    });
  }
}