Asynchrones JavaScript beherrschen: Rückrufe, Versprechen und Async/Await vereinfacht

Asynchrones JavaScript: Von Rückrufen zu Versprechen und Async/Await

Einführung

JavaScript ist eine leistungsstarke Single-Threaded-Programmiersprache, die häufig für die Webentwicklung verwendet wird. Eine häufige Herausforderung in JavaScript besteht darin, asynchrone Aufgaben wie das Abrufen von Daten von einer API oder das Ausführen zeitkritischer Vorgänge zu bewältigen, ohne den Hauptthread zu blockieren. Im Laufe der Zeit sind Entwickler von der Verwendung von Rückrufen zu Versprechen übergegangen und verwenden nun die elegantere Async/Await-Syntax zur Verwaltung asynchroner Vorgänge. Dieser Leitfaden führt Sie Schritt für Schritt durch diese Konzepte, angefangen bei den Grundlagen über den Aufbau bis hin zu fortgeschrittenen Szenarios. Am Ende werden Sie in der Lage sein, asynchrones JavaScript sicher in realen Anwendungen zu verwenden.

Was ist asynchrone Programmierung?

In JavaScript können Aufgaben wie das Abrufen von Daten von einem Server, das Lesen von Dateien oder das Festlegen von Zeitüberschreitungen einige Zeit in Anspruch nehmen. Anstatt auf den Abschluss dieser Aufgaben zu warten (was die Ausführung des restlichen Programms blockieren würde), ermöglicht JavaScript die asynchrone Ausführung solcher Aufgaben. Dies bedeutet, dass sie unabhängig vom Hauptprogrammablauf verarbeitet werden, sodass anderer Code ohne Verzögerung ausgeführt werden kann.

Rückrufe verstehen: Der Ausgangspunkt

Was sind Rückrufe?

Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird. Wenn die erste Funktion ihren Vorgang abschließt, führt sie die Rückruffunktion aus, um den Abschluss zu signalisieren.

Rückrufbeispiel: Grundlagen verstehen

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Erklärung:

1. fetchData simuliert das Abrufen von Daten mit einer Verzögerung.
2. Nach der Verzögerung führt es die Rückruffunktion (processData) aus und zeigt an, dass die Daten bereit sind.

Rückrufhölle: Das Problem

Die Verwendung verschachtelter Rückrufe zur Bearbeitung mehrerer asynchroner Aufgaben kann schnell zu unlesbarem und schwer zu wartendem Code führen.

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

Diese „Pyramide des Untergangs“ erschwert das Debuggen und Warten von Code.

Versprechen: Eine bessere Alternative

Was sind Versprechen?

Ein Versprechen ist ein Objekt, das einen Wert darstellt, der jetzt, in der Zukunft oder nie verfügbar sein kann. Versprechen haben drei Zustände:

• Ausstehend: Ausgangszustand, weder erfüllt noch abgelehnt.
• Erfüllt: Vorgang erfolgreich abgeschlossen.
• Abgelehnt: Vorgang fehlgeschlagen.

Versprechensbeispiel: Callback Hell umschreiben

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

Vorteile von Versprechen

1. Verbesserte Lesbarkeit durch Verkettung.
2. Eingebaute Fehlerbehandlung mit .catch().
3. Vermeidet tief verschachtelte Rückrufe.

Async/Await: Moderne Eleganz

Was ist Async/Await?

async/await ist syntaktischer Zucker über Versprechen, eingeführt in ES2017. Dadurch sieht asynchroner Code synchron aus, was die Lesbarkeit und Wartbarkeit verbessert.

Async/Await-Beispiel: Versprechen vereinfachen

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

Wie es funktioniert

1. async-Schlüsselwort: Deklariert eine Funktion als asynchron.
2. Warten Sie das Schlüsselwort: Hält die Funktionsausführung an, bis das Versprechen aufgelöst oder abgelehnt wird.

Vorteile von Async/Await

1. Sequentieller, lesbarer Code.
2. Fehlerbehandlung mit try...catch.
3. Reduziert die Komplexität von Rückrufen.

Umgang mit realen Szenarien mit Async/Await

Parallele Ausführung: Promise.all

Wenn Sie mehrere unabhängige asynchrone Aufgaben parallel ausführen müssen:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("Data fetched!");
            resolve("Fetched data");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

Fehlerbehandlung: try...catch vs. .catch()

Fehler ordnungsgemäß mit try...catch für asynchrone Funktionen verwalten:

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

Häufig gestellte Fragen zu asynchronem JavaScript

Was passiert, wenn ich das Warten vergesse?

Die Funktion gibt ein Versprechen anstelle des aufgelösten Werts zurück. Dies kann zu unerwartetem Verhalten führen.

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

Kann ich Async/Await ohne Versprechen verwenden?

Nein,wait funktioniert ausschließlich mit Versprechen. Bibliotheken wie fetch und die fs.promises-API von Node.js bieten jedoch native, auf Versprechen basierende Methoden.

Wann sollte ich Rückrufe verwenden?

Rückrufe sind immer noch nützlich für kleine, einfache Aufgaben oder bei der Arbeit mit älteren APIs, die keine Versprechen unterstützen.

Abschluss

Die Beherrschung von asynchronem JavaScript ist für jeden Entwickler, der mit modernen Webanwendungen arbeitet, unerlässlich. Beginnend mit Rückrufen können Sie erkennen, wie Versprechen und Async/Await asynchronen Code vereinfachen und die Lesbarkeit verbessern. Gehen Sie sparsam mit Rückrufen um, nutzen Sie Versprechen für eine bessere Fehlerbehandlung und nutzen Sie Async/Warten für sauberen, intuitiven Code. Mit diesen Tools sind Sie bereit, jede asynchrone Herausforderung in Ihren Projekten zu meistern.

Das obige ist der detaillierte Inhalt vonAsynchrones JavaScript beherrschen: Rückrufe, Versprechen und Async/Await vereinfacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!