Ajax запросы внутри цикла

[MC-XOBAHCK]

Здравствуйте! Подскажите пожалуйста, как мне решить такую задачу.

У меня внутри цикла Ajax-запрос на сервер. Как мне правильно сделать чтобы следующая итерация цикла начиналась после того как придёт ответ с сервера для текущей итерации?

Вот код:

loader.classList.remove('hide');

arr.forEach(el => {
    let tableName = el.dataset.table;

    $.request('onAjax', {
        data: {
            'table': tableName
        },
        success: function(data) {
            // ответ сервера об успешном выполнении запроса
        },
        error: function(data) {
            // ответ об ошибке
        },
        complete: function(data) {
            // выполнится независимо от успешного запроса или ошибки
        }
    });

});

loader.classList.add('hide');

Я читал и немного изучал про промисы. Вроде идея понятна, но никогда их не использовал вообще. А как их для цикла применить для меня пока загадка.
Возможно тут не промисы а async нужно, но этим тоже никогда не пользовался.

В общем без помощи никак...

[voraa]

Если цикл должен продолжаться независимо от ошибок, по-простому, сильно не переделывая можно так с использованием Promise

const ajaxloop = (arr) => { 
	let prom = Promise.resolve(true)
	for (const el of arr) {
		const tableName = el.dataset.table;
		prom = prom.then ( _ =>  return new Promise (res => {
				$.request('onAjax', {
					data: {
						'table': tableName
					},
					success: function(data) {
							// ответ сервера об успешном выполнении запроса
					},
					error: function(data) {
							// ответ об ошибке
					},
					complete: function(data) {
							// выполнится независимо от успешного запроса или ошибки
						res()  // Тут промис разрешился
					}
				});
			})
		)
	}
       return prom
}

Вызываем все это так

loader.classList.remove('hide');
ajaxloop (arr)
  .then (_ => loader.classList.add('hide');) // что то там гасим, когда все вызовы закончатся.

[MC-XOBAHCK]

voraa,
Спасибо! Буду пробовать.

А можете подсказать, мне нужно индекс итерации прокинуть в ответ сервера (success и error).
Нашёл метод entries но боюсь что вставлю так что всё сломаю.

[voraa]

Тогда так.

const ajaxloop = (arr) => {
    let prom = Promise.resolve(true)
    for (let i = 0; i < arr.length; i++) {
        let el = arr[i]
        const tableName = el.dataset.table;
        prom = prom.then ( _ =>  return new Promise (res => {
                $.request('onAjax', {
                    data: {
                        'table': tableName
                    },
                    success: function(data) {
                            // Тут можно использовать i
                            // ответ сервера об успешном выполнении запроса
                    },
                    error: function(data) {
                            // ответ об ошибке
                    },
                    complete: function(data) {
                            // выполнится независимо от успешного запроса или ошибки
                        res()  // Тут промис разрешился
                    }
                });
            })
        )
    }
       return prom
}

[voraa]

Я пользовался такой функцией

/*
	Асинхронно обрабатывает элементы arr. Каждый элемент обрабатывается после обработки предыдущего
	функция callback принимает параметры
		el - элемент массива
		i - индекс элемента 
		arr - сам массив
	 и должна возвращать Promise, разрешаемый после обработки элемента.
	 Если Promise отклоняется, обработка цикла прерывается
	 
	 Возвращает Promise, разрешенный после обработки всех элементов или отклоненный, если какой либо элемент
	 вернул отклоненный Promise
*/
asyncForEach (arr, callback) {
 
 let prom = Promise.resolve(true) 
 for (let i = 0; i< arr.length; i++) {
	let el = arr[i];
	prom = prom.then ( _ => callback (el, i, arr))
 } 
 return prom.then ( _ => arr.length);
}

Тогда можно так

const ajaxcall = (el, i) => {
	const tableName = el.dataset.table;
	return new Promise ((res, rej) => {
		$.request('onAjax', {
				data: {
					'table': tableName
				},
				success: function(data) {
									// ответ сервера об успешном выполнении запроса
				},
				error: function(data) {
									// ответ об ошибке
					// rej(data) // Если вызывать, цикл прервется	
				},
				complete: function(data) {
									// выполнится независимо от успешного запроса или ошибки
					res()  // Тут промис разрешился
				}
			});
		})
}

loader.classList.remove('hide');
asyncForEach (arr, ajaxcall )
  .then (_ => loader.classList.add('hide');) // что то там гасим, когда все вызовы закончатся.
// .catch (data =>{
    // Тут можно обработать, если где то произошла ошибка и цикл прошел не полностью
//})

[MC-XOBAHCK]

Тогда так.

Этот вариант работает, только в 6 строке нужно ретурн убрать

Вместо

prom = prom.then ( _ =>  return new Promise (res => {

вот так

prom = prom.then ( _ =>  new Promise (res => {

Мне вариант с промисами понятен. Я просто взять функцию в переменную не додумываюсь.
Вон ниже в блоке Похожие темы мой же похожий вопрос про setTimeout. Тоже решение - в переменную взять. Я вчера ещё сидел смотрел на тот вариант, но решения придумать не смог.

Спасибо за помощь!