Ajax w pętli

Question

Witam, 

Pobieram z zew. systemu większą ilość danych jednak system jednorazowo zwraca max 1000 rekordów.

Z tego względu muszę pobierać dane w pętli aby pobrać wszystkie rekordy.

Jak zmusić JS/jQuery aby wykonało  AJAX synchronicznie w pętli FOR aby można było wykonać resztę kodu zanim pobierze kolejną porcję danych??

opcja async: false nie wchodzi w rachubę ;) 

$('#button').on('click',function(){
for (i = 0; i < kroki; i++) {
  part = $.ajax({...});
  reszta_kodu();
  calosc += part;
}
});

 

Answer 1

• Użyj Promise
• Jeżeli znasz liczbę requestów to możesz sprawdzić po wykonaniu ajax-a czy już wszystkie się wykonały, jeżeli tak to wykonaj jakąś funkcje. 

Answer 2

Osobiście widzę 3 warianty:

- zapytania wykonywane jednocześnie (więc i rezultaty przetwarzane asynchronicznie), wykonanie kodu per part po otrzymaniu odpowiedzi. Łatwizna, zwykłe użycie jQuery.

function on_click1() {
    for (let i = 0; i < kroki; i++) {
        $.ajax({
            ...
        }).then(function(part){
            // kod dzialajacy na part
            calosc += part;
        });
    }
};

- zapytania wykonywane po kolei (jedno zapytanie po przeliczeniu wyniku poprzedniego), składnia async (nie zadziała na starszych przeglądarkach):

async function on_click2() {
    for (let i = 0; i < kroki; i++) {
        let part = await $.ajax({...});
        // kod dzialajacy na part
        calosc += part;
    }
}

- jak wyżej, ale z użyciem promise (pewnie paskudne i ktoś zaraz napisze lepsze):

function on_click3() {
	(function loop(i) {
		if (i >= kroki) return;
		$.ajax({
			...
		}).then(function(part){
			// kod dzialajacy na part
			calosc += part;
		}).then(() => loop(i+1));
	})(0);
};