Последовательный вывод информации при fetch/ajax

[squid]

Здравствуйте. Подскажите, пожалуйста способ информирования на странице при большой обработки информации. Есть база с id товарами. Первым запросом я получаю массив нужных id, а во втором, через for, перебираю id и отсылаю его на сервер который по api уже запрашивает данные товара и обрабатывает. Вместе с тем отдаёт, после обработки, например, название товара которое я вывожу в span. Камень преткновения асинхронность так как сервис разрешает делать только 3 запроса в секунду. Я так понимаю нужно использовать promise c await. Что выдал поиск, то у меня почему-то не работает. Он не выводит отданное имя последовательно, а отдаёт пачками. Не понятно чего он там ждёт. Примерный мой алгоритм (допускаю, что крив)

$ajax({
	data: {ids},
	onsuccess: function( res ) {
		request(res.lists, res.count);
	}
})

function request(res, count){
	for (let i = 0; i < res.length; i++) {
		$ajax({
			data: {res[i]},
			onsuccess: function(ret) {
				document.getElementById("title").innerHTML = ...
			}
		})
	}
}

Я бы проще сервер на сокете запустил, но увы нет возможности.

[voraa]

Примерный мой алгоритм

Ну примерно так надо

$ajax({
    data: {ids},
    onsuccess: function( res ) {
        request(res.lists, res.count);
    }
})

function request(res, count){

	let t0 = performance.now();

	// Если от t0 прошло меньше 1 сек, делаем задержку до 1 сек.
	const delay = () {
		const t = performance.now() - t0;
		dt = 1000 - (t - t0);
		const t0 = t;
		return new Promise ((resp) => {
			if (dt > 0) 
				setTimeout (resp, dt);
			else 
				resp();
		})
	}

	// Запрос к серверу
	const getajax (data) {
		reurn new Promise ( (resp() => {
			$ajax({
				data: {data},
				onsuccess: function(ret) {
					resp(ret);
				}
			})
		})
	}

	let p = Promise.resolve();

	for (let i = 0; i < res.length; i++) {
		// После каждых 3 запросов, делаем задержку, если необходимо
		if (i && i % 3 === 0) p = p.then ( () => delay () );
		
		p = p
			.then ( () => getajax (res[i]))
			.then ( (ret) => {document.getElementById("title").innerHTML = ...})
	}
}

[squid]

voraa, Я думал на бэки сделать задержку. Там одна строка всего. 4000000 микросекунд после каждого запроса. Мне главное, что бы js дождался ответа и не выполнял дальше пока выполняется запрос. Я в js слаб можете, пожалуйста, подправить с учётом sleep на сервере?

[voraa]

4000000 микросекунд после каждого запроса.

Это не 3 запроса в секунду, это - 4 сек между запросами?

Мне главное, что бы js дождался ответа и не выполнял дальше пока выполняется запрос

JS не может просто ждать. Он запускает асинхронную операцию (например запрос к серверу), назначает функцию, которая должна быть выполнена, когда операция завершится (придет ответ от сервера), но сам идет выполняться дальше, не ожидая, когда операция завершится.

В Promise задается асинхронная операция. В then назначается функция, которая будет выполняться при завершении асинхронной операции.

Ну если задержки реализованы на сервере, то можно обойтись без функции delay и ожидания - строки

// После каждых 3 запросов, делаем задержку, если необходимо
 if (i && i % 3 === 0) p = p.then ( () => delay () );

[squid]

Это не 3 запроса в секунду, это - 4 сек между запросами?

Ноликом ошибся.

// После каждых 3 запросов, делаем задержку, если необходимо
 if (i && i % 3 === 0) p = p.then ( () => delay () );

Спасибо.

[clare200]

Great discussion on handling sequential data with fetch! Have you considered error handling in your async calls? It’s crucial for ensuring stability. By the way, check out blumgi slime for some fun coding projects that could enhance your skills!