Cómo realizar solicitudes asincrónicas en un bucle en JavaScript

Implementar solicitudes asincrónicas dentro de un bucle de JavaScript puede no parecer obvio al principio. Al realizar solicitudes asincrónicas dentro de un bucle de JavaScript, es importante manejarlas correctamente. Esto se puede hacer de diferentes maneras. En esta publicación, veremos dos formas.

Solicitudes paralelas con Promise.all() (más rápido)

Si las solicitudes son independientes y se pueden ejecutar en paralelo, use Promise.all(). Esto permite que todas las solicitudes se ejecuten simultáneamente, lo que mejora el rendimiento.

JavaScript

const ids = [12, 23, 45, 57];

async function fetchAllData() {
    const responses = await Promise.all(
        ids.map((id) => {
            const url = 'https://api.example.com/some/' + id;
            return fetch(url).then(res => res.json());
        })
    );
    console.log(responses); // Array of resolved responses
}

fetchAllData();

Ideal para: una ejecución más rápida cuando las solicitudes no dependen unas de otras.

Solicitudes secuenciales con for...of (garantiza el orden)

Si las solicitudes deben ejecutarse una tras otra, utilice for...of con await.

JavaScript

const ids = [12, 23, 45, 57];

async function fetchSequentially() {
    for (const id of ids) {
        const url = 'https://api.example.com/some/' + id;
        const response = await fetch(url);
        const data = await response.json();
        console.log(data); // Logs each response one by one
    }
}
 
fetchSequentially();

Mejor para: cuando las solicitudes dependen de resultados anteriores o deben ejecutarse en orden.