Czym jest Promise.all w JavaScript?

By /

JavaScript

Promise.all jest metodą w JavaScript, która pozwala na równoczesne wykonywanie wielu obietnic (promises) i oczekiwanie na ich wszystkie zakończenie. Jest to niezwykle przydatne w scenariuszach, gdzie potrzebujemy dopiero kontynuować wykonanie kodu, gdy wszystkie asynchroniczne operacje zostaną zakończone. Promise.all przyjmuje tablicę obietnic jako argument i zwraca nową obietnicę, która rozstrzyga się po pomyślnym zakończeniu wszystkich obietnic z tablicy lub zostaje odrzucona, gdy którakolwiek z obietnic zostanie odrzucona.

Przykład użycia Promise.all w połączeniu z HTML

W poniższym przykładzie zobaczymy, jak można użyć Promise.all do wykonania kilku asynchronicznych żądań fetch i wyświetlenia wyników na stronie webowej.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład Promise.all w JavaScript</title>
</head>
<body>
    <div id="results"></div>
    <script>
        // Definicja funkcji asynchronicznej 
        // wykonującej żądania fetch
        async function fetchUrls(urls) {
            try {
                // Użycie Promise.all do wykonania 
                // wszystkich żądań równocześnie
                let results = await Promise.all(
                     urls.map(url => fetch(url)
                      .then(response => response.json()
                 )));
                
                // Wyświetlenie wyników
                displayResults(results);
            } catch (error) {
                // Obsługa błędów
                console.error("Wystąpił błąd", error);
                document.getElementById('results').innerHTML = "Błąd podczas ładowania danych.";
            }
        }

        // Funkcja do wyświetlania wyników
        function displayResults(results) {
            const resultsContainer = document.getElementById('results');
            results.forEach(result => {
                const element = document.createElement('pre');
                element.textContent = JSON.stringify(result, null, 2);
                resultsContainer.appendChild(element);
            });
        }

        // Lista URLi do pobrania
        const urls = [
            'https://jsonplaceholder.typicode.com/posts/1',
            'https://jsonplaceholder.typicode.com/posts/2',
            'https://jsonplaceholder.typicode.com/posts/3'
        ];

        // Wywołanie funkcji fetchUrls z listą URLi
        fetchUrls(urls);
    </script>
</body>
</html>

W powyższym przykładzie, fetchUrls jest asynchroniczną funkcją, która używa Promise.all do równoczesnego wykonania żądań HTTP za pomocą funkcji fetch. Każde żądanie jest przekształcane do formatu JSON. Wszystkie wyniki są następnie wyświetlane w elemencie div o id results.

Podsumowanie

Promise.all w JavaScript umożliwia efektywne zarządzanie wieloma operacjami asynchronicznymi, co jest szczególnie przydatne w aplikacjach webowych, gdzie często korzysta się z zewnętrznych API. Dzięki temu można upewnić się, że cały zestaw danych zostanie załadowany, zanim aplikacja przejdzie do kolejnego etapu przetwarzania. Jest to potężne narzędzie, które zwiększa wydajność i niezawodność kodu asynchronicznego w JavaScript.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top