Как сделать ajax-запрос только по завершении предыдущего?

Question

[BarneyGumble]

У меня есть массив url-адресов:

hotelsArray = [
    "http://site1.ru",
    "http://site2.ru",
    "http://site3.ru",
    "http://site4.ru",
    "http://site5.ru"    
];

Я хочу пройтись по нему в цикле и отправить на каждый url ajax-запрос. Если я делаю вот так, то у меня скопом посылаются несколько запросов. Если представить, что в массиве не 5 позиций, а 500, то, проблема зависания всего и вся очевидна:

$.each(hotelsArray,function(index,value){
    $.ajax({
        type: 'GET',
        url: '/server.php?url='+value,
        success: function(data){
            console.log(data);
        }
    });
});

Как в цикле можно сделать так, чтобы каждый следующий ajax-запрос посылался только после завершения предыдущего?

Answer 1

[Антон Антон]

Нужно использовать асинхронный reduce: https://jsfiddle.net/h0kbpwvu/2/
Ну и использовать что-то, что возвращает Promise, а не использует callback, например fetch или axios.
Также можно промисифицировать Jquery, но это путь в никуда. Лучше от него вообще отказаться.

function asyncAjax(url) {
  return new Promice((success, error) => {
    $.ajax({
        type: 'GET',
        url,
        success,
        error
    });
  });
}

Comments

[BarneyGumble]

Попробовал адаптировать пример под себя - не вышло(

[Антон Антон]

BarneyGumble, что конкретно не получилось?
Меняешь значения задержки на адреса, delay - на получение данных. В tmp пихаешь результат получения данных, или обработки, или что там у тебя

[Антон Антон]

BarneyGumble, вероятно надо использовать не https://api.jquery.com/jquery.ajax/ , а что-то, что возвращает Promise, например fetch или axios. Ну, или промисифицировать jquery

[BarneyGumble]

Антон Антон, мой уровень в JavaScript видимо много ниже, чем вышеназванные термины( Никогда не работал с промисами, только базово с jQuery

[Антон Антон]

BarneyGumble, что-то типа такого должно быть:

https://jsfiddle.net/p74b896f/9/