0
184
VisualizaçõesAgregar a la matriz en asíncrono para bucle
Tengo esta función que contiene otras funciones asíncronas anidadas.
Estoy descomprimiendo un archivo zip y luego agregando cada HTMLImageElement a una matriz.
Sin embargo, la matriz está imprimiendo así
16 es el número correcto de imágenes que espero, pero no están definidas cuando las console.log() .
export async function fetchVisuals(TestID: number) { var zip = new JSZip(); const res = await fetch('*DJANGO URL*', { body: JSON.stringify(TestID), method: 'POST' }) let http_ok = res.ok const blob = await res.blob() var bufferPromise = await blob.arrayBuffer(); zip.loadAsync(bufferPromise).then(async ({files}) => { const mediaFiles = Object.entries(files).filter(([fileName]) => fileName.endsWith('.jpg'), ); if (!mediaFiles.length) { throw new Error('No media files found in archive'); } // I'm very confident the issue is to do with the below function let promiseArray = mediaFiles.map(function([,image]) { image.async('blob').then((blob: Blob | MediaSource) => { console.log("mediaFiles loop") const img = new Image(); img.src = URL.createObjectURL(blob) console.log(img) return img }) }) Promise.all(promiseArray).then(function(resultsArray) { console.log(resultsArray) }) }) } Estoy asignando la promesa de cada imagen a una matriz y luego hago Promise.all() en esta matriz, por lo que no estoy seguro de por qué sigue volviendo como undefined .
Dentro de mediaFiles.map() hago algunas impresiones e imprimen los datos img con éxito.
¿Cómo puedo llenar esta matriz con HTMLImageElements ?
1 Respostas
Responde à pergunta0
No devuelves tu promesa en la función de mapa:
let promiseArray = mediaFiles.map(function([,image]) { image.async('blob').then((blob: Blob | MediaSource) => { console.log("mediaFiles loop") const img = new Image(); img.src = URL.createObjectURL(blob) console.log(img) return img }) })debe convertirse en:
// I'm very confident the issue is to do with the below function let promiseArray = mediaFiles.map(function([,image]) { /*just there : */ return image.async('blob').then((blob: Blob | MediaSource) => { console.log("mediaFiles loop") const img = new Image(); img.src = URL.createObjectURL(blob) console.log(img) return img }) })Para su segunda pregunta, debe esperar sus promesas y devolver sus resultados:
export async function fetchVisuals(TestID: number) { var zip = new JSZip(); const res = await fetch('*DJANGO URL*', { body: JSON.stringify(TestID), method: 'POST' }) let http_ok = res.ok const blob = await res.blob() var bufferPromise = await blob.arrayBuffer(); const {files} = await zip.loadASync(bufferPromise); const mediaFiles = Object.entries(files).filter(([fileName]) => fileName.endsWith('.jpg'), ); if (!mediaFiles.length) { throw new Error('No media files found in archive'); } // I'm very confident the issue is to do with the below function let promiseArray = mediaFiles.map(function([,image]) { return image.async('blob').then((blob: Blob | MediaSource) => { console.log("mediaFiles loop") const img = new Image(); img.src = URL.createObjectURL(blob) console.log(img) return img }) }) return await Promise.all(promiseArray); }