Heim > Web-Frontend > js-Tutorial > Meine Reaktionsreise: Tag 9

Meine Reaktionsreise: Tag 9

Barbara Streisand
Freigeben: 2024-12-08 11:03:14
Original
568 Leute haben es durchsucht

My React Journey: Day 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."));
Nach dem Login kopieren
  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();
Nach dem Login kopieren

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));
Nach dem Login kopieren
  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();

Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage