Obviamente me falta algo de conocimiento cuando se trata de async-await
Espero que el base64 para cada imagen se registre uno tras otro en el mismo orden que la matriz de la lista de lotes y luego espero que se registre el end .
¡Obtengo un montón de indefinidos y end registrado primero! ¡Eeek!
async function GetImages() { async function blobToBase64(blob) { const reader = new FileReader(); reader.onloadend = () => { return reader.result; }; reader.readAsDataURL(blob); } async function getBase64(url) { const response = await fetch(url); const blob = await response.blob(); const base64 = await blobToBase64(blob); return base64 } async function fetchBatchList() { const batchList = [ "https://i.imgur.com/M0K21iS.jpg", "https://i.imgur.com/uNbsNAd.jpg", "https://i.imgur.com/QdqhGb9.jpg" ]; batchList.forEach(async url => { const res = await getBase64(url) console.log(res) }) } async function end() { console.log('end') } await fetchBatchList(); await end(); } GetImages();Agregar async a una función no hace que espere a que se llame la devolución de llamada.
Debe envolver su devolución de llamada de FileReader en una promise para obtener el resultado.
Tampoco está esperando nada en su función fetchBatchList . Una buena solución es simplemente asignar cada elemento a una promise y luego usar Promise.all() para esperar hasta que todas las URL estén terminadas.
async function GetImages() { function blobToBase64(blob) { // Create promise return new Promise((resolve, reject) => { const reader = new FileReader(); // Resolve value when done reader.onloadend = () => { resolve(reader.result); }; // Reject if we have an error reader.onerror = () => { reject(reader.error); } reader.readAsDataURL(blob); }); } async function getBase64(url) { const response = await fetch(url); const blob = await response.blob(); const base64 = await blobToBase64(blob); return base64 } async function fetchBatchList() { const batchList = [ "https://i.imgur.com/M0K21iS.jpg", "https://i.imgur.com/uNbsNAd.jpg", "https://i.imgur.com/QdqhGb9.jpg" ]; // Map each url to a promise const list = batchList.map(url => { return getBase64(url) }) // Wait until all are done const urls = await Promise.all(list); console.log(urls); return urls; } async function end() { console.log('end') } await fetchBatchList(); await end(); } GetImages();