Fetch recursivo o cómo procesar un montón de entradas en tu base de datos…

Si tienes un archivo XML, JSON o simplemente una base de datos con miles de entradas y necesitas procesarlos uno por uno sin matar tu servidor o saturar tu backend, existe una forma, una de cientos seguramente. Consiste en utilizar la recursividad de JavaScript, Promises y un temporizador, concretamente setTimeout.

Por ejemplo si se te ocurre la brillante idea de realizar un bucle común (for, foreach, while…) y meter fetch() dentro, verás que risa. De hecho si has llegado a este articulo a traves de google ya lo has hecho y buscas una solución:

funcionEjemplo() {
  fetch("someurl/1");
}


for(index = 1, index < 100, index ++) {
  setTimeout(funcionEjemplo, 2000);
}

funcionEjemplo() {
  fetch("someurl/1");
}


for(index = 1, index < 100, index ++) {
  setTimeout(funcionEjemplo, 2000);
}


Este código lo que hará es llamar 100 veces simultáneamente a la función pasados los 2 segundos. Algo que a tu backend no hará mucha gracia… Para solucionarlo y llamar a la funcionEjemplo() cada dos segundos, siempre que se acabe la llamada previa necesitarías utilizar recursividad:

let indice = 1;

funcionEjemplo() {
 fetch("redimensionar/foto/" + indice).then(e => {
   indice++;
   setTimeout(funcionEjemplo, 2000);
 })
}

setTimeout(funcionEjemplo, 2000);

Con esto obtendrás una llamada a la función cada dos segundos, siempre que se acabe la primera. La recursividad en principio lo que te hace algo así como un «bucle», si lo combinas con fetch que devuelve una promesa, obtienes una forma de recorrer una api o base de datos de una forma «responsable», es decir sin hacer 5000 llamadas en un par de segundos.

Ejemplo real en uno de mis proyectos

En mi caso he tenido que utilizar esta forma para redimensionar decenas de miles de fotos en mi backend, sin saturar el servidor. Cada 3 segundos hago una llamada desde mi frontend a backend que se encarga de obtener una foto, redimensionar y volver a subir todo a mi bucket Amazon S3. Pero las aplicaciones en realidad son infinitas.

Cabe destacar que dentro de then(), lo suyo sería comprobar el índice y si el request ha sido un «éxito» (response.status igual a 200)… etc.

Consejos y comentarios son bienvenidos. Si tienes una solución o idea mejor, escríbeme un comentario y le echo un ojo 😉