Estoy desarrollando una pequeña aplicación que permite al usuario seleccionar algunos documentos en la interfaz y cuando hacen clic en "Descargar", se genera un zip con todos sus documentos.
Estoy usando client-zip para eso. Todo funciona bien con 1 documento (1 recuperación), pero hay un pequeño problema que no puedo resolver. ¿Cómo puedo agregar recuperaciones dinámicas en función de la cantidad de elementos en una matriz?
Mi código hasta ahora:
const allDownloads = []; async function downloadTestZip() { const code = await fetch(allDownloads[0]); const blob = await downloadZip([code]).blob(); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'test.zip'; link.click(); link.remove(); } allDownloads=[] se completa cuando el usuario marca la marca de verificación junto al documento. Así que puede haber hasta 200 documentos diferentes.
Tienes que crear una serie de Promesas y luego esperarlas todas:
const promises = allDownloads.map( url => fetch(url) ); // or simply .map(fetch), as a shorthand const codes = await Promise.all(promises); // now codes is an array of codes (strings, probably?)Para mejorar la latencia, puede usar un iterador asíncrono (client-zip se complace en tomar eso en lugar de una matriz).
async function *lazyFetch() { for (const url of allDownloads) yield await fetch(url) } const blob = await downloadZip(lazyFetch()).blob() Funcionalmente hace lo mismo que la solución con Promise.all (y es apenas más código). Sin embargo, client-zip podrá comenzar a procesar los datos tan pronto como la primera respuesta esté lista (en lugar de las 200).
La creación del archivo ZIP implica algunos cálculos y copias. Entonces, si deja que client-zip comience temprano, todas esas cosas que requieren un uso intensivo de la CPU pueden ocurrir mientras el navegador maneja la solicitud HTTP para el siguiente archivo. Los navegadores suelen tener un grupo de clientes HTTP y no iniciarán 200 solicitudes al mismo tiempo.