Devuelvo dentro de una solicitud ajax una etiqueta html personalizada:
<eval-script src="script1.js"></eval-script> <eval-script src="script2.js"></eval-script> <eval-script src="script3.js"></eval-script>Luego analizo la respuesta y almaceno todas las ejecuciones de secuencias de comandos en una matriz (funciones de flecha):
const evalArray = []; const getScript = function(src, dfd) { $.getScript(src) .done(function() { dfd.resolve(); }) .fail(function() { dfd.reject(); }); } const evalScripts = document.querySelectorAll("eval-script"); for (const script of evalScripts) { const src = script.getAttribute("src"); evalArray.push((dfd) => getScript(src, dfd)); };Después de eso, itero a través de la matriz e intento esperar a que se cargue el script (no diferido, síncrono):
evalArray.forEach((func) => { const dfd = $.Deferred(); func(dfd); while (dfd.state() === "pending") { console.log("wait for resolve (" + dfd.state() + "): " + func); }; return; });Esto se hace porque quiero que las secuencias de comandos se ejecuten en el orden enviado y podrían confiar en la secuencia de comandos anterior. También quiero ejecutar un script después de eso que depende de que se carguen los scripts.
Desafortunadamente, puedo ver que $.getScript está solicitando el script, y los encabezados de respuesta de los scripts se muestran en la pestaña de red de los navegadores, pero no hay contenido y las promesas cumplidas o fallidas no se ejecutan.
Los scripts se pueden abrir por url en el navegador sin problema. También puedo ejecutar "$.getScript('script1.js')" en la consola sin ningún problema.
No quiero usar Ajax síncrono porque esa es una opción obsoleta en jquery. Tampoco tengo ningún problema con la configuración de la promesa, pero getScript no se ejecuta como se esperaba.
¿Puede ayudarme alguien, por favor?
Mi código ahora se ve así según la sugerencia de @jfriend00:
async function loadScripts() { const evalScripts = document.querySelectorAll("eval-script"); for (const script of evalScripts) { const src = script.getAttribute("src"); await $.getScript(src); console.log("getScript done: " + src); } } loadScripts().then(result => { console.log("all done loading scripts: " + result); }).catch(err => { console.log(err); }); console.log("eval done!");Desafortunadamente, la secuencia de comandos no espera que se carguen todas las secuencias de comandos, ya que la salida de la consola es:
eval done! getScript done: script.js getScript done: script2.js getScript done: script3.js getScript done: script4.js getScript done: script5.js all done loading scripts: undefined¿Cómo hago que el script espere a que se carguen todos los scripts?
Y como veo, async await es la función ECMA2016. ¿Qué tan ampliamente es compatible con los navegadores?
Solución final:
Mi solicitud ajax ahora está llamando a una función asíncrona en caso de éxito (promesa hecha):
$.ajax({ ... }).done(function(data, textStatus, jqXHR) { onSuccess(); })Dentro de la función onSuccess coloqué el código asíncrono desde arriba, pero además estoy esperando la promesa:
async function onSuccess() { async function loadScripts() { const evalScripts = document.querySelectorAll("eval-script[src]"); for (const script of evalScripts) { const src = script.getAttribute("src"); await $.getScript(src); } } await loadScripts(); }De esta manera, puedo acceder y ejecutar cada objeto/función desde los scripts evaluados directamente después de llamar a "await loadScripts()".
Mi agradecimiento va a @ jfriend00 empujándome de la manera correcta y aclarando asíncrono en espera de ejecución en javascript.