Meine Reaktionsreise: Tag 9

Was ich heute gelernt habe:

1. Asynchrones JavaScript:

Definition: Asynchrone Programmierung ermöglicht es JavaScript, Aufgaben auszuführen, ohne auf den Abschluss einer vorherigen Aufgabe warten zu müssen.
Anwendungsfall: API-Aufrufe oder andere zeitaufwändige Vorgänge durchführen.
Vorteil: Verbessert die Effizienz, da andere Aufgaben ausgeführt werden können, während auf eine Antwort gewartet wird.

1. Rückrufe:

• Definition: Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben und später bei Bedarf ausgeführt wird.
• Herausforderung: Verschachtelte Rückrufe erzeugen eine Rückrufhölle, wodurch der Code schwer zu lesen und zu warten ist.
• Lösung: Es wurden Versprechen eingeführt, um die asynchrone Handhabung zu vereinfachen.

1. Versprechen:
2. Definition: Versprechen handhaben asynchrone Vorgänge sauberer und vermeiden die Rückrufhölle.

• Zustände der Versprechen:
  Ausstehend: Ausgangszustand, Warten auf das Ergebnis.
  Gelöst: Der Vorgang war erfolgreich.
  Abgelehnt: Der Vorgang ist fehlgeschlagen.

• Methoden:

.then(): Wird ausgeführt, wenn das Versprechen aufgelöst wird.
.catch(): Wird ausgeführt, wenn das Versprechen abgelehnt wird.
.finally(): Wird unabhängig davon ausgeführt, ob das Versprechen gelöst oder abgelehnt wird.

Beispiel für Versprechen

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. Asynchron/Warten

• Zweck: Aufbauend auf Promises für saubereren und besser lesbaren Code.
• Asynchrone Funktion: Deklariert eine Funktion, die asynchrone Vorgänge verarbeitet.
• Warten-Schlüsselwort: Hält die Funktionsausführung an, bis das Versprechen aufgelöst oder abgelehnt wird.

Beispiel für Async/Await:

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5. Analogie zum realen Leben:

• Versprechen: Ausstehend: Pizza online bestellen und auf Lieferung warten. Behoben: Pizza kommt. Sie genießen Ihr Essen. Abgelehnt: Pizza kommt nicht an. Du beschwerst dich.
• Asynchron/Warten: Sie lesen ein Buch weiter, während Sie auf die Ankunft der Pizza warten.

6.Promise.all

• Zweck: Mehrere Versprechen gleichzeitig ausführen und warten, bis alle abgeschlossen sind. Beispiel:

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. Asynchron/Warten mit Fetch-API

• Abrufen: Eine moderne Möglichkeit, HTTP-Anfragen in JavaScript zu stellen. Beispiel:

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

Highlights

• Versprechen bereinigen asynchrone Vorgänge und verbessern die Fehlerbehandlung.
• Async/Await erleichtert das Schreiben und Verstehen des Codes, insbesondere für verkettete Versprechen.
• Promise.all ist nützlich, um mehrere asynchrone Aufgaben parallel auszuführen.

Bisher war es eine wunderschöne Fahrt.

Tag 10 mit Feuer

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 9. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!