Die Callback-Hölle, saubereres asynchrones JavaScript schreiben

Wenn Sie längere Zeit mit JavaScript gearbeitet haben, sind Sie wahrscheinlich auf die „Callback-Hölle“ gestoßen – das Wirrwarr verschachtelter Callbacks, das das Lesen Ihres Codes und die Wartung noch schwieriger macht. Aber hier ist die gute Nachricht: Mit den richtigen Tools und Mustern können Sie die Callback-Hölle komplett vermeiden und sauberen, effizienten asynchronen Code schreiben. Lassen Sie uns herausfinden, wie.

Versprechen: Der erste Schritt zum Bereinigen von Async-Code

Versprechen sind eine strukturiertere Möglichkeit, asynchrone Vorgänge in JavaScript abzuwickeln, und sie helfen dabei, tief verschachtelte Rückrufe zu vermeiden. Anstatt Funktionen als Argumente zu übergeben und zu verschachteln, können Sie mit Promises Operationen mit den Methoden .then() und .catch() verketten. Dadurch bleibt der Code linear und viel einfacher zu befolgen.
Beispiel:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Bei diesem Promise-basierten Ansatz folgt jeder Schritt klar und linear auf den vorherigen, sodass es einfacher ist, den Codefluss zu verfolgen und bei Bedarf Fehler zu beheben.

Async/Await: Die moderne Lösung

Obwohl Promises sich hervorragend zum Bereinigen verschachtelter Rückrufe eignen, können sie sich bei der Verarbeitung mehrerer asynchroner Aktionen dennoch umständlich anfühlen. Geben Sie async ein und warten Sie. Mit diesen modernen JavaScript-Funktionen können Sie asynchronen Code schreiben, der fast wie synchroner Code aussieht und so die Lesbarkeit und Wartbarkeit verbessert.
Beispiel:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

Mit async/await können Sie Promises auf eine viel intuitivere Weise handhaben, insbesondere für Entwickler, die es gewohnt sind, synchronen Code zu schreiben. Es macht eine .then()-Verkettung überflüssig und sorgt dafür, dass Ihr Code von oben bis unten unkompliziert aussieht.

Teilen Sie große Aufgaben in kleine Funktionen auf

Eine weitere leistungsstarke Technik zur Vermeidung der Callback-Hölle besteht darin, große, komplexe Aufgaben in kleinere, wiederverwendbare Funktionen zu zerlegen. Dieser modulare Ansatz verbessert nicht nur die Lesbarkeit, sondern erleichtert auch das Debuggen und Warten Ihres Codes.

Wenn Sie beispielsweise Daten von einer API abrufen und verarbeiten müssen, können Sie diese aufschlüsseln, anstatt alles in eine große Funktion zu schreiben:

Beispiel:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return await response.json();
}

async function processData(data) {
    // Process your data here
    return data.map(item => item.name);
}

async function main() {
    try {
        const data = await fetchData();
        const processedData = await processData(data);
        console.log('Processed Data:', processedData);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

main();

Durch die Aufteilung der Belange des Abrufens und Verarbeitens von Daten in ihre eigenen Funktionen wird Ihr Code viel besser lesbar und wartbar.

Mit Fehlern elegant umgehen

Eine große Herausforderung bei asynchronem Code ist die Fehlerbehandlung. In einer tief verschachtelten Rückrufstruktur kann es schwierig sein, Fehler richtig zu erkennen und zu behandeln. Mit Promises können Sie .catch() am Ende Ihrer Operationen verketten. Allerdings bietet Async/Await in Kombination mit Try-Catch-Blöcken eine natürlichere und lesbarere Möglichkeit, mit Fehlern umzugehen.

Beispiel:

async function riskyOperation() {
    try {
        const result = await someAsyncTask();
        console.log('Result:', result);
    } catch (error) {
        console.error('Something went wrong:', error);
    }
}

riskyOperation();

Auf diese Weise können Sie Fehler in einem bestimmten Teil Ihres asynchronen Codes erkennen, ihn klar und überschaubar halten und sicherstellen, dass keine Fehler unbemerkt durchgehen.

Verwalten mehrerer asynchroner Vorgänge

Manchmal müssen Sie mehrere asynchrone Vorgänge gleichzeitig verwalten. Während Promise.all() häufig verwendet wird, stoppt es die Ausführung, wenn ein Promise fehlschlägt. In solchen Fällen kommt Promise.allSettled() zur Rettung – es wartet auf die Abwicklung aller Versprechen (entweder aufgelöst oder abgelehnt) und gibt ihre Ergebnisse zurück.

Beispiel:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Verwenden Sie Web Worker für schweres Heben

Bei CPU-intensiven Aufgaben wie Bildverarbeitung oder Datenverarbeitung kann die Single-Threaded-Natur von JavaScript dazu führen, dass Ihre Anwendung einfriert. Hier glänzen Web Worker – sie ermöglichen es Ihnen, Aufgaben im Hintergrund auszuführen, ohne den Hauptthread zu blockieren, und sorgen dafür, dass die Benutzeroberfläche reagiert.

Beispiel:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

Indem Sie schwere Aufgaben an Web Worker verlagern, bleibt Ihr Haupt-Thread für die Abwicklung von UI-Interaktionen und anderen wichtigen Funktionen frei und sorgt so für ein reibungsloseres Benutzererlebnis.

In Anbetracht all dessen

Um die Callback-Hölle zu vermeiden und saubereres asynchrones JavaScript zu schreiben, geht es darum, Ihren Code lesbarer, wartbarer und effizienter zu machen. Ganz gleich, ob Sie Promises, Async/Await, die Modularisierung Ihres Codes oder die Nutzung von Web Workern verwenden, das Ziel ist dasselbe: Halten Sie Ihren Code flach und organisiert. Wenn Sie das tun, ersparen Sie sich nicht nur die Debugging-Albträume, sondern schreiben auch Code, für den andere (oder sogar Sie in Zukunft!) Ihnen danken werden.

---

Meine Website: https://Shafayet.zya.me

---

Ein Meme für dich?

Das obige ist der detaillierte Inhalt vonDie Callback-Hölle, saubereres asynchrones JavaScript schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!