Możesz to rozwiązać za po mocą obiecanki np: fetchAPI.
np:
document.addEventListenr ("load" , loadDynamicjQ);
function loadDynamicJq()[
var myRequest = new Request(''https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'', {method: GET'});
fetch(myRequest).then((response)=>
{
var jQuery = document.createElement('script');
jQuery.src = 'response.url';
jQuery.type = 'text/javascript';
head.appendChild(jQuery);
var newRequest = new Request (ten twój request do twojego API)
fetch(newRequest).then((response) => {
//Kod wkladania twojego API
}
}
}
Musisz jedynie zrobić poly dla fetchAPI dla IE.
A teraz co tu się stało, JS porównaniu do innych języków jest językiem jedno wątkowym, dlatego tu nie może użyć wzorca projektowego Observer State, który by badał stan klasy,obiekty etc. Dlatego w JS wymyślono XHR, a wraz rozwojem obiekt Promise. FetchAPI można powiedzieć jest swego rodzaju interfejsem który posiada ten obiekt Promise (dokładne informacje gdzie on dokładnie jest budowany znajdziesz tu --> https://developers.google.com/web/updates/2015/03/introduction-to-fetch);
Inną możliwością jest najnowszy budowany standard ES7 składania await/async, niestety nie jest oficjanie jeszcze obsługiwana przez natywne API. Dlatego musisz sobie je dociągnąć.
https://www.npmjs.com/package/asyncawait
Inną opcją jes wykrozystanie gotowych bibliotek specjalnie przystosowanych do tych zadań.
http://headjs.com/ - posiada w sobie ten komponent, ale potrafi wiele innych rzeczy zrobić . Obecnie chyba już nie rozwijana.
https://github.com/systemjs/systemjs - wyspecjalizowana biblioteka do dynamic loadingu . Obsługiwana jest przez requireJS ale pewnie jest i też poly do ES6.