Questo dovrebbe essere abbastanza facile, considerando questo è il modo in cui le richieste HTTP JavaScript funzionano di default!
A meno che tu non specifichi espressamente XMLHttpRequest (o jQuery $.ajax o uno dei suoi wrapper) per essere sincrono, verrà eseguito in modalità asincrona. Ciò significa che gli dai una funzione di callback, invia la richiesta e quindi continua nel codice. Solo quando la risposta restituisce la richiamata viene invocata con esso - ciò può accadere molto tempo dopo che l'evento JavaScript che ha inviato la richiesta è terminato.
Quindi, quello che devi semplicemente fare è (mostrato in jQuery per semplicità, ma il concetto di JS puro è lo stesso):
$.ajax({
type: 'POST',//or 'GET'
url: 'first_api_url',
data: {/*first_api_data*/}
}).done(function(data){
//Data contains the results from the first API.
//Use them to update the DOM.
});
$.ajax({
type: 'POST',//or 'GET'
url: 'second_api_url',
data: {/*second_api_data*/}
}).done(function(data){
//Data contains the results from the second API
//Use them to update the DOM.
});
P.S. - Non dovresti contare sulla seconda chiamata inviata prima che la risposta della prima chiamata ritorni. Se la risposta della prima chiamata ritorna veramente veloce, potrebbe interrompersi nel mezzo. Probabilmente dipende dall'implementazione di JavaScript, e probabilmente non succederà in questo particolare codice quando la seconda chiamata è immediatamente successiva alla prima, ma ho riscontrato un brutto bug in cui le chiamate AJAX ritornano troppo velocemente e usano le cose prima che siano inizializzato.