Wie erstelle ich einen reinen js-Zyklus von Rückrufen?

Ich habe eine API, von der ich N Seiten mit Daten abfragen muss. Da ich die API nicht überladen möchte, möchte ich dies sequentiell und ohne Blockierung des Hauptthreads tun.

Der Code wäre in etwa so:

var res = []; // all data from api
var totalPages = 10;
var pageSize = 100;
for (let page = 0; page < totalPages; page++) {
 // load using jQuery ajax request
 $.get('api.php', { page: page, page_size: pageSize }, function(result) {
 res.push(...result); // add data to resulting array
 });
}

Aber dieser Ansatz hat ein paar Probleme:

Da es asynchron ist, führt es einfach alle Anfragen parallel aus und überlastet dadurch die API. Ich brauche sie, um immer noch asynchron zu laufen, aber jeder sollte nur laufen, wenn der vorherige fertig ist.

Da alle Aufrufe asynchron sind, hätten wir am Ende des Zyklus immer noch nicht die angeforderten Daten – sie werden im Hintergrund geladen. Wir müssen irgendwie warten, bis alle Rückrufe ausgeführt sind, bevor wir reszu einem anderen Code zurückkehren, der dies benötigt.

Es gibt keine Möglichkeit, jeden Rückruf dazu zu bringen, sein Ergebnis an den nächsten Rückruf weiterzugeben, und es ist die einzige Möglichkeit, das Laden zu stoppen, wenn ein Rückruf die Anforderung „Laden stoppen"/„keine Daten mehr" vom Server erhält

Gibt es eine Möglichkeit, diese Probleme zu beheben, ohne einige Nebenbibliotheken oder Versprechungen zu verwenden? Einfach nur altes Vanilla-Javascript. Tut mir leid, wenn etwas unklar aussieht, ich bin nicht sehr erfahren in js

Lösung des Problems

Sie können hier eine einfache Rekursion wie folgt verwenden:

var res = []; // all data from api
var totalPages = 10;
var pageSize = 100;
const loader = page => {
 // load using jQuery ajax request
 $.get('api.php', { page: page, page_size: pageSize }, function(result) {
 res.push(...result); // add data to resulting array
 if (page < totalPages)
 loader(++page)
 else
 console.log('DONE!');
 });
}
loader(0);