How to make a request within a loop

LuBustos — Thu, 27 Oct 2022 10:51:00 +0000

Hey! This is my first blog here, so I hope you enjoy it :p

Let's go

There are two ways to make a request within a loop: we have the sequence way or the parallel way.

I made a small example in codesandbox to show a practical case.

Here is the link: Example

Sequence method:

const sequence = async () => {
  try {
    for (const color of colors) {
      const response = await save(color);
      console.log("response sequence", response);
    }
  } catch (error) {
    console.error(error);
  }
};

In this way we have to use a for...of to loop every item of the array and to execute the method save within the loop.
In this case the code will be executed line by line, which means first the method save and then the console.log.

And this is the result:

saved it {id: 1, color: "red"}
response sequence {id: 1, color: "red"}
saved it {id: 2, color: "green"}
response sequence {id: 2, color: "green"}

This way is a little bit slow, but if you are waiting for a response from the server, such as an id, it is useful.

Parallel method

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);
  }
};

In this case we are using a Promise.all within a .map. This is important because this method returns an array of promises and the Promise.all will execute all the promises together.

Looping the array, every element in it will enter the save method and, after this, the next line will be executed, in this case the console.log.

This is the result:

saved it {id: 1, color: "red"}
saved it {id: 2, color: "green"}
response parallel {id: 1, color: "red"}
response parallel {id: 2, color: "green"}

You can appreciate better from the link that I attached or maybe creating a file.js and debugging step by step.

This is all for today.
I hope you can find this useful and I will be expecting your comments.

Dos maneras de hacer una request dentro de un loop

LuBustos — Thu, 27 Oct 2022 10:50:52 +0000

¡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);
  }
};

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"}

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);
  }
};

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"}

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.

DEV Community: LuBustos

How to make a request within a loop

Let's go

Dos maneras de hacer una request dentro de un loop

¡Empecemos!