DEV Community

LuBustos
LuBustos

Posted on

1

Dos maneras de hacer una request dentro de un loop

¡Hola! Primera vez creando un post aquí, vamos a ver cómo sale :p

¡Empecemos!

Existen dos maneras de hacer una request dentro de un loop y estas son de manera paralela o secuencial.

Armé un pequeño ejemplo dentro de un codesandbox para que el ejemplo sea mas práctico.

Ejemplo

  • Método secuencial:
const sequence = async () => {
  try {
    for (const color of colors) {
      const response = await save(color);
      console.log("response sequence", response);
    }
  } catch (error) {
    console.error(error);
  }
};
Enter fullscreen mode Exit fullscreen mode

Para realizar una request de manera secuencial lo que tenemos que usar es un for...of que recorra el objeto en cuestión y, dentro del loop, la petición al backend.
En este caso el código se va a ejecutar línea por línea.
Primero ingresará al método save, nos mostrará el objeto guardado y retornará la promesa para luego (en la siguiente línea dentro del for) mostrarnos la response.

Este es el resultado:

saved it {id: 1, color: "red"}
response sequence {id: 1, color: "red"}
saved it {id: 2, color: "green"}
response sequence {id: 2, color: "green"}
Enter fullscreen mode Exit fullscreen mode

Es un método un poco lento, pero si necesitamos utilizar los datos que nos trae del servidor luego de ejecutar la petición, como por ejemplo un id, es bastante útil.

  • Método Paralelo:
const parallel = async () => {
  try {
    await Promise.all(
      colors.map(async (color) => {
        const response = await save(color);
        console.log("response parallel", response);
      })
    );
  } catch (error) {
    console.error(error);
  }
};
Enter fullscreen mode Exit fullscreen mode

En este caso estamos utilizando un Promise.all y dentro un .map, esto es importante debido a que este método retorna un array, por lo que en este caso retornará las responses (en forma de promises) y el Promise.all las ejecutará de manera inmediata todas juntas.

Recorriendo el array cada elemento ingresará al método save y una vez que todos los elementos del array realizaron la petición, en ese momento se va a ejecutar a la siguiente línea de la misma manera que la anterior, por lo tanto cada elemento del array ejecutará el console.log

Y este es el resultado:

saved it {id: 1, color: "red"}
saved it {id: 2, color: "green"}
response parallel {id: 1, color: "red"}
response parallel {id: 2, color: "green"}
Enter fullscreen mode Exit fullscreen mode

Esto se puede apreciar mejor desde el link que adjunté o pueden pasar el código a un file.js y debuggearlo paso por paso.

¡Eso es todo por hoy!
Espero que les haya gustado y leo sus comentarios.

Image of Bright Data

High-Quality Data for AI – Access diverse datasets ready for your ML models.

Browse our extensive library of pre-collected datasets tailored for various AI and ML projects.

Explore Datasets

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay