Як робити асинхронні запити в циклі в JavaScript

Реалізація асинхронних запитів у циклі JavaScript спочатку може здатися неочевидною. Роблячи асинхронні запити в циклі JavaScript, важливо правильно їх обробляти. Це можна зробити по-різному. У цій публікації ми розглянемо 2 варіанти.

Паралельні запити з Promise.all() (найшвидший)

Якщо запити незалежні та можуть виконуватися паралельно, використовуйте для цього Promise.all(). Це дозволяє виконувати всі запити одночасно, покращуючи продуктивність.

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

Найкраще для: Швидше виконання, коли запити не залежать один від одного.

Послідовні запити з for...of (забезпечує порядок)

Якщо запити мають виконуватися один за одним, використовуйте for...of разом з 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();

Найкраще для: коли запити залежать від попередніх результатів або мають виконуватися в порядку.