Estoy escribiendo una pequeña prueba de concepto, que descarga todos mis activos HTML a través de fetch() . Actualmente, consulto todas las etiquetas con un activo compatible y lo ejecuto a través de un bucle for para cada tipo de activo. Lo que debo hacer es ejecutar una función de devolución de llamada después de que hayan finalizado todas las solicitudes en los bucles. Intenté esperar pero descarga cada activo uno por uno. ¿Cómo puedo hacer esto?
const scripts = document.querySelectorAll("script"); const links = document.querySelectorAll("link"); const images = document.querySelectorAll("img"); for (const script of scripts) { (async (s) => { const doIgnore = s.getAttribute("data-ignoreload"); if (doIgnore) return; const src = s.getAttribute("data-src"); if (!src) { console.error("Script does not have a data-src prop."); return; } fetch(src) .then(x => x.text()) .then(r => { const newScript = document.createElement("script"); newScript.innerHTML = r; document.body.appendChild(newScript); }) .catch(err => { console.error(`Error loading script with src ${src}: ${err}`); }); })(script); } for (const link of links) { (async (l) => { const doIgnore = l.getAttribute("data-ignoreload"); if (doIgnore) return; const rel = l.getAttribute("rel"); if (!(rel == "stylesheet")) { return; } const href = l.getAttribute("data-href"); if (!href) { console.error("Stylesheet does not have a data-href prop."); return; } fetch(href) .then(x => x.text()) .then(r => { const newStyle = document.createElement("style"); newStyle.innerHTML = r; document.head.append(newStyle); }) .catch(err => { console.error(`Error loading stylesheet with href ${href}: ${err}`); }); })(link); } for (const image of images) { (async (i) => { const doIgnore = i.getAttribute("data-ignoreload"); if (doIgnore) return; const src = i.getAttribute("data-src"); if (!src) { console.error("Image does not have a data-src prop."); return; } fetch(src) .then(x => x.blob()) .then(r => { const url = URL.createObjectURL(r); i.setAttribute("src", url); }) .catch(err => { console.error(`Error loading image ${src}: ${err}`); }); })(image); }Inserte todas sus promesas en una matriz y luego use Promise.allSettled(promises).then((results) => {})
Documentación: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
Ejemplo:
const promises = images.map(async (image) => { // do some async work return fetch(whatever); // don't .catch this }) Promise.allSettled(promises).then((results) => { // results is a result of errors or successes })