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

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.