JavaScript-Nebenläufigkeit meistern: Ein tiefer Einblick in die parallele Verarbeitung von Promises

In der Landschaft der modernen Webentwicklung ist Leistung kein Feature, sondern eine grundlegende Anforderung. Benutzer auf der ganzen Welt erwarten, dass Anwendungen schnell, reaktionsschnell und nahtlos sind. Im Zentrum dieser Leistungsherausforderung, insbesondere in JavaScript, liegt das Konzept der effizienten Handhabung asynchroner Operationen. Vom Abrufen von Daten von einer API über das Lesen einer Datei bis hin zur Abfrage einer Datenbank gibt es viele Aufgaben, die nicht sofort abgeschlossen werden. Wie wir diese Wartezeiten verwalten, kann den Unterschied zwischen einer trägen Anwendung und einem erfreulich flüssigen Benutzererlebnis ausmachen.

JavaScript ist von Natur aus eine single-threaded Sprache. Das bedeutet, dass es immer nur einen Codeabschnitt zur gleichen Zeit ausführen kann. Das mag wie eine Einschränkung klingen, aber der Event-Loop und das nicht-blockierende I/O-Modell von JavaScript ermöglichen es, asynchrone Aufgaben mit unglaublicher Effizienz zu bewältigen. Der moderne Eckpfeiler dieses Modells ist das Promise – ein Objekt, das den letztendlichen Abschluss (oder das Scheitern) einer asynchronen Operation darstellt.

Die bloße Verwendung von Promises oder ihrer eleganten `async/await`-Syntax garantiert jedoch nicht automatisch eine optimale Leistung. Eine häufige Falle für Entwickler ist die sequentielle Behandlung mehrerer unabhängiger asynchroner Aufgaben, was zu unnötigen Engpässen führt. Hier kommt die nebenläufige Verarbeitung von Promises ins Spiel. Indem wir mehrere asynchrone Operationen parallel starten und gemeinsam auf sie warten, können wir die Gesamtausführungszeit drastisch reduzieren und weitaus effizientere Anwendungen erstellen.

Dieser umfassende Leitfaden nimmt Sie mit auf einen tiefen Einblick in die Welt der JavaScript-Nebenläufigkeit. Wir werden die direkt in die Sprache integrierten Werkzeuge – `Promise.all()`, `Promise.allSettled()`, `Promise.race()` und `Promise.any()` – erkunden, um Ihnen zu helfen, parallele Aufgaben wie ein Profi zu orchestrieren. Ob Sie ein Junior-Entwickler sind, der sich mit Asynchronität vertraut macht, oder ein erfahrener Ingenieur, der seine Muster verfeinern möchte, dieser Artikel wird Sie mit dem Wissen ausstatten, um schnelleren, widerstandsfähigeren und anspruchsvolleren JavaScript-Code zu schreiben.

Zuerst eine kurze Klärung: Nebenläufigkeit vs. Parallelität

Bevor wir fortfahren, ist es wichtig, zwei Begriffe zu klären, die oft synonym verwendet werden, aber in der Informatik unterschiedliche Bedeutungen haben: Nebenläufigkeit und Parallelität.

• Nebenläufigkeit (Concurrency) ist das Konzept der Verwaltung mehrerer Aufgaben über einen bestimmten Zeitraum. Es geht darum, viele Dinge gleichzeitig zu bewältigen. Ein System ist nebenläufig, wenn es mehr als eine Aufgabe starten, ausführen und abschließen kann, ohne auf das Ende der vorherigen zu warten. In der single-threaded Umgebung von JavaScript wird Nebenläufigkeit über den Event-Loop erreicht, der es der Engine ermöglicht, zwischen Aufgaben zu wechseln. Während eine lang andauernde Aufgabe (wie eine Netzwerkanfrage) wartet, kann die Engine an anderen Dingen arbeiten.
• Parallelität (Parallelism) ist das Konzept der gleichzeitigen Ausführung mehrerer Aufgaben. Es geht darum, viele Dinge gleichzeitig zu tun. Echte Parallelität erfordert einen Mehrkernprozessor, bei dem verschiedene Threads auf verschiedenen Kernen zur exakt gleichen Zeit laufen können. Während Web Worker echte Parallelität im browserbasierten JavaScript ermöglichen, bezieht sich das Kernmodell der Nebenläufigkeit, das wir hier diskutieren, auf den einzelnen Hauptthread.

Für I/O-gebundene Operationen (wie Netzwerkanfragen) bietet das nebenläufige Modell von JavaScript den *Effekt* von Parallelität. Wir können mehrere Anfragen gleichzeitig initiieren. Während die JavaScript-Engine auf die Antworten wartet, ist sie frei, andere Arbeiten zu erledigen. Die Operationen finden aus der Perspektive der externen Ressourcen (Server, Dateisysteme) 'parallel' statt. Dies ist das leistungsstarke Modell, das wir nutzen werden.

Die sequentielle Falle: Ein häufiges Anti-Pattern

Beginnen wir damit, einen häufigen Fehler zu identifizieren. Wenn Entwickler `async/await` zum ersten Mal lernen, ist die Syntax so sauber, dass es leicht ist, Code zu schreiben, der synchron aussieht, aber unbeabsichtigt sequentiell und ineffizient ist. Stellen Sie sich vor, Sie müssen das Profil eines Benutzers, seine letzten Beiträge und seine Benachrichtigungen abrufen, um ein Dashboard zu erstellen.

Ein naiver Ansatz könnte so aussehen:

Beispiel: Der ineffiziente sequentielle Abruf

            
async function fetchDashboardDataSequentially(userId) {
    console.time('sequentialFetch');

    console.log('Fetching user profile...');
    const userProfile = await fetchUserProfile(userId); // Waits here

    console.log('Fetching user posts...');
    const userPosts = await fetchUserPosts(userId); // Waits here

    console.log('Fetching user notifications...');
    const userNotifications = await fetchUserNotifications(userId); // Waits here

    console.timeEnd('sequentialFetch');
    return { userProfile, userPosts, userNotifications };
}

// Imagine these functions take time to resolve
// fetchUserProfile -> 500ms
// fetchUserPosts -> 800ms
// fetchUserNotifications -> 1000ms

            

              
                Copy
              
            
          

Was ist an diesem Bild falsch? Jedes `await`-Schlüsselwort pausiert die Ausführung der `fetchDashboardDataSequentially`-Funktion, bis das Promise aufgelöst ist. Die Anfrage für `userPosts` startet nicht einmal, bis die `userProfile`-Anfrage vollständig abgeschlossen ist. Die Anfrage für `userNotifications` startet nicht, bis `userPosts` zurück ist. Diese drei Netzwerkanfragen sind voneinander unabhängig; es gibt keinen Grund zu warten! Die Gesamtzeit ist die Summe aller einzelnen Zeiten:

Gesamtzeit ≈ 500ms + 800ms + 1000ms = 2300ms

Das ist ein riesiger Leistungsengpass. Wir können das viel, viel besser machen.

Leistungssteigerung: Die Kraft der nebenläufigen Ausführung

Die Lösung besteht darin, alle asynchronen Operationen auf einmal zu initiieren, ohne sofort auf sie zu warten. Dadurch können sie nebenläufig ausgeführt werden. Wir können die ausstehenden Promise-Objekte in Variablen speichern und dann einen Promise-Kombinator verwenden, um auf deren Abschluss zu warten.

Beispiel: Der effiziente nebenläufige Abruf

            
async function fetchDashboardDataConcurrently(userId) {
    console.time('concurrentFetch');

    console.log('Initiating all fetches at once...');
    const profilePromise = fetchUserProfile(userId);
    const postsPromise = fetchUserPosts(userId);
    const notificationsPromise = fetchUserNotifications(userId);

    // Now we wait for all of them to complete
    const [userProfile, userPosts, userNotifications] = await Promise.all([
        profilePromise,
        postsPromise,
        notificationsPromise
    ]);

    console.timeEnd('concurrentFetch');
    return { userProfile, userPosts, userNotifications };
}

            

              
                Copy
              
            
          

In dieser Version rufen wir die drei Abruffunktionen ohne `await` auf. Dadurch werden alle drei Netzwerkanfragen sofort gestartet. Die JavaScript-Engine übergibt sie an die zugrunde liegende Umgebung (den Browser oder Node.js) und erhält drei ausstehende Promises zurück. Dann wird `Promise.all()` verwendet, um auf die Auflösung aller drei Promises zu warten. Die Gesamtzeit wird nun durch die am längsten laufende Operation bestimmt, nicht durch die Summe.

Gesamtzeit ≈ max(500ms, 800ms, 1000ms) = 1000ms

Wir haben gerade unsere Datenabrufzeit um mehr als die Hälfte reduziert! Das ist das Grundprinzip der parallelen Promise-Verarbeitung. Lassen Sie uns nun die leistungsstarken Werkzeuge erkunden, die JavaScript zur Orchestrierung dieser nebenläufigen Aufgaben bietet.

Das Promise-Kombinatoren-Toolkit: `all`, `allSettled`, `race` und `any`

JavaScript bietet vier statische Methoden auf dem `Promise`-Objekt, die als Promise-Kombinatoren bekannt sind. Jede nimmt ein iterierbares Objekt (wie ein Array) von Promises entgegen und gibt ein einziges neues Promise zurück. Das Verhalten dieses neuen Promises hängt davon ab, welchen Kombinator Sie verwenden.

1. `Promise.all()`: Der Alles-oder-Nichts-Ansatz

Promise.all() ist das perfekte Werkzeug, wenn Sie eine Gruppe von Aufgaben haben, die alle für den nächsten Schritt entscheidend sind. Es repräsentiert die logische „UND“-Bedingung: Aufgabe 1 UND Aufgabe 2 UND Aufgabe 3 müssen alle erfolgreich sein.

• Eingabe: Ein iterierbares Objekt von Promises.
• Verhalten: Es gibt ein einziges Promise zurück, das erfüllt wird, wenn alle Eingabe-Promises erfüllt wurden. Der erfüllte Wert ist ein Array der Ergebnisse der Eingabe-Promises in derselben Reihenfolge.
• Fehlermodus: Es wird sofort zurückgewiesen, sobald eines der Eingabe-Promises zurückgewiesen wird. Der Zurückweisungsgrund ist der Grund des ersten zurückgewiesenen Promises. Dies wird oft als „Fail-Fast“-Verhalten bezeichnet.

Anwendungsfall: Kritische Datenaggregation

Unser Dashboard-Beispiel ist ein perfekter Anwendungsfall. Wenn Sie das Profil des Benutzers nicht laden können, macht es möglicherweise keinen Sinn, seine Beiträge und Benachrichtigungen anzuzeigen. Die gesamte Komponente hängt davon ab, dass alle drei Datenpunkte verfügbar sind.

            
// Helper to simulate API calls
const mockApiCall = (value, delay, shouldFail = false) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldFail) {
                reject(new Error(`API call failed for: ${value}`));
            } else {
                console.log(`Resolved: ${value}`);
                resolve({ data: value });
            }
        }, delay);
    });
};

async function loadCriticalData() {
    console.log('Using Promise.all for critical data...');
    try {
        const [profile, settings, permissions] = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700),
            mockApiCall('userPermissions', 500)
        ]);
        console.log('All critical data loaded successfully!');
        // Now render the UI with profile, settings, and permissions
    } catch (error) {
        console.error('Failed to load critical data:', error.message);
        // Show an error message to the user
    }
}

// What happens if one fails?
async function loadCriticalDataWithFailure() {
    console.log('\nDemonstrating Promise.all failure...');
    try {
        const results = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700, true), // This one will fail
            mockApiCall('userPermissions', 500)
        ]);
    } catch (error) {
        console.error('Promise.all rejected:', error.message);
        // Note: The 'userProfile' and 'userPermissions' calls may have completed,
        // but their results are lost because the whole operation failed.
    }
}

loadCriticalData();
// After a delay, call the failure example
setTimeout(loadCriticalDataWithFailure, 2000);


            

              
                Copy
              
            
          

Fallstrick bei `Promise.all()`

Der primäre Fallstrick ist sein Fail-Fast-Charakter. Wenn Sie Daten für zehn verschiedene, unabhängige Widgets auf einer Seite abrufen und eine API fehlschlägt, wird `Promise.all()` zurückgewiesen, und Sie verlieren die Ergebnisse der anderen neun erfolgreichen Aufrufe. Hier glänzt unser nächster Kombinator.

2. `Promise.allSettled()`: Der resiliente Sammler

Eingeführt in ES2020, war `Promise.allSettled()` ein Wendepunkt für die Widerstandsfähigkeit. Es ist dafür konzipiert, wenn Sie das Ergebnis jedes einzelnen Promises wissen möchten, egal ob es erfolgreich war oder fehlgeschlagen ist. Es wird niemals zurückgewiesen.

• Eingabe: Ein iterierbares Objekt von Promises.
• Verhalten: Es gibt ein einziges Promise zurück, das immer erfüllt wird. Es wird erfüllt, sobald alle Eingabe-Promises abgeschlossen (entweder erfüllt oder zurückgewiesen) sind. Der erfüllte Wert ist ein Array von Objekten, die jeweils das Ergebnis eines Promises beschreiben.
• Ergebnisformat: Jedes Ergebnisobjekt hat eine `status`-Eigenschaft.
  • Wenn erfüllt: `{ status: 'fulfilled', value: theResult }`
  • Wenn zurückgewiesen: `{ status: 'rejected', reason: theError }`

Anwendungsfall: Nicht-kritische, unabhängige Operationen

Stellen Sie sich eine Seite vor, die mehrere unabhängige Komponenten anzeigt: ein Wetter-Widget, einen News-Feed und einen Börsenticker. Wenn die News-Feed-API fehlschlägt, möchten Sie trotzdem das Wetter und die Börseninformationen anzeigen. `Promise.allSettled()` ist dafür perfekt geeignet.

            
async function loadDashboardWidgets() {
    console.log('\nUsing Promise.allSettled for independent widgets...');
    const results = await Promise.allSettled([
        mockApiCall('Weather Data', 600),
        mockApiCall('News Feed', 1200, true), // This API is down
        mockApiCall('Stock Ticker', 800)
    ]);

    console.log('All promises have settled. Processing results...');
    
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`Widget ${index} loaded successfully with data:`, result.value.data);
            // Render this widget to the UI
        } else {
            console.error(`Widget ${index} failed to load:`, result.reason.message);
            // Show a specific error state for this widget
        }
    });
}

loadDashboardWidgets();

            

              
                Copy
              
            
          

Mit `Promise.allSettled()` wird Ihre Anwendung viel robuster. Ein einzelner Fehlerpunkt führt nicht zu einer Kaskade, die die gesamte Benutzeroberfläche lahmlegt. Sie können jedes Ergebnis elegant behandeln.

3. `Promise.race()`: Der Erste im Ziel

Promise.race()` macht genau das, was sein Name andeutet. Es lässt eine Gruppe von Promises gegeneinander antreten und erklärt einen Gewinner, sobald der erste die Ziellinie überquert, unabhängig davon, ob es ein Erfolg oder ein Misserfolg war.

            
function createTimeout(delay) {
    return new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`Operation timed out after ${delay}ms`));
        }, delay);
    });
}

async function fetchDataWithTimeout() {
    console.log('\nUsing Promise.race for a timeout...');
    try {
        const result = await Promise.race([
            mockApiCall('some critical data', 2000), // This will take too long
            createTimeout(1500) // This will win the race
        ]);
        console.log('Data fetched successfully:', result.data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchDataWithTimeout();

            

              
                Copy
              
            
          

            
async function fetchResourceFromMirrors() {
    console.log('\nUsing Promise.any to find the fastest successful source...');
    try {
        const resource = await Promise.any([
            mockApiCall('Primary CDN', 800, true), // Fails quickly
            mockApiCall('European Mirror', 1200), // Slower but will succeed
            mockApiCall('Asian Mirror', 1100) // Also succeeds, but is slower than the European one
        ]);
        console.log('Resource fetched successfully from a mirror:', resource.data);
    } catch (error) {
        if (error instanceof AggregateError) {
            console.error('All mirrors failed to provide the resource.');
            // You can inspect individual errors:
            error.errors.forEach(err => console.log('- ' + err.message));
        }
    }
}

fetchResourceFromMirrors();

            

              
                Copy
              
            
          

            
async function processInBatches(items, batchSize, processingFn) {
    let results = [];
    for (let i = 0; i < items.length; i += batchSize) {
        const batch = items.slice(i, i + batchSize);
        console.log(`Processing batch starting at index ${i}...`);
        
        const batchPromises = batch.map(processingFn);
        const batchResults = await Promise.allSettled(batchPromises);
        results = results.concat(batchResults);
    }
    return results;
}

// Example usage:
const userIds = Array.from({ length: 20 }, (_, i) => i + 1);

// We will process 20 users in batches of 5
processInBatches(userIds, 5, id => mockApiCall(`user_${id}`, Math.random() * 1000))
    .then(allResults => {
        console.log('\nBatch processing complete.');
        const successful = allResults.filter(r => r.status === 'fulfilled').length;
        const failed = allResults.filter(r => r.status === 'rejected').length;
        console.log(`Total Results: ${allResults.length}, Successful: ${successful}, Failed: ${failed}`);
    });

            

              
                Copy