Asynchrones JavaScript verstehen

JavaScript ist eine Single-Threaded-Sprache, was bedeutet, dass sie jeweils nur eine Sache ausführen kann. Webanwendungen müssen jedoch häufig Aufgaben wie das Abrufen von Daten von einem Server ausführen, was einige Zeit in Anspruch nehmen kann. Wenn JavaScript warten müsste, bis jede Aufgabe abgeschlossen ist, bevor es fortfahren kann, würde dies dazu führen, dass Ihre Web-App langsam wird und nicht mehr reagiert. Hier kommt asynchrones (asynchrones) JavaScript ins Spiel.

Was ist asynchrones JavaScript?

Asynchrones JavaScript ermöglicht es Ihrem Code, eine Aufgabe zu starten und dann mit anderen Aufgaben fortzufahren, während er auf den Abschluss dieser Aufgabe wartet. Sobald die Aufgabe abgeschlossen ist, kann Ihr Code zurückkehren und das Ergebnis verarbeiten. Dadurch bleibt Ihre App schnell und reaktionsfähig.

Schlüsselkonzepte in asynchronem JavaScript

1. Synchron vs. Asynchron:

   • Synchron: Jede Aufgabe wartet, bis die vorherige abgeschlossen ist, bevor sie beginnt. Zum Beispiel:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   Nach dem Login kopieren

   Im synchronen Code wird die „End“-Meldung erst protokolliert, nachdem someFunction() abgeschlossen wurde, was die Arbeit verlangsamen kann.

• Asynchron: Aufgaben können unabhängig voneinander gestartet und beendet werden, sodass Ihr Code nicht beim Warten hängen bleibt. Zum Beispiel:
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  Nach dem Login kopieren

  Hier wird die „End“-Meldung nach 2 Sekunden protokolliert, aber in der Zwischenzeit kann Ihr Code weiterhin andere Dinge tun.

1. Rückrufe:

   • Ein Rückruf ist eine Funktion, die als Argument an eine andere Funktion übergeben wird und nach Abschluss einer Aufgabe ausgeführt wird.
   • Beispiel:

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

   Nach dem Login kopieren

• Rückrufe waren die ursprüngliche Möglichkeit, asynchrone Aufgaben abzuwickeln, aber sie können kompliziert werden, insbesondere wenn Sie viele Aufgaben verwalten müssen (dies wird als „Rückrufhölle“ bezeichnet).

1. Versprechen:

   • Ein Versprechen ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) einer asynchronen Aufgabe und den daraus resultierenden Wert darstellt.
   • Beispiel:

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

   Nach dem Login kopieren

• Auflösen: Wenn die Aufgabe erfolgreich abgeschlossen wird, wird das Versprechen mit einem Wert „aufgelöst“.
• Ablehnen: Wenn die Aufgabe fehlschlägt, wird das Versprechen mit einer Fehlermeldung „abgelehnt“.
• .then(): Verarbeitet den zurückgegebenen Wert, wenn das Versprechen gelöst wird.
• .catch(): Behandelt den Fehler, wenn das Versprechen abgelehnt wird.

1. Asynchron/Warten:

   • async und await sind moderne JavaScript-Funktionen, die die Arbeit mit Versprechen einfacher und lesbarer machen.
   • async: Eine mit async deklarierte Funktion gibt immer ein Versprechen zurück.
   • Warten: Hält die Ausführung einer asynchronen Funktion an, bis das Versprechen aufgelöst ist.
   • Beispiel:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

   Nach dem Login kopieren

• In diesem Beispiel wird das Schlüsselwort „await“ verwendet, um auf den Abschluss von someAsyncTask zu warten, bevor mit der nächsten Codezeile fortgefahren wird. Wenn die Aufgabe fehlschlägt, wird der Fehler abgefangen und im Catch-Block behandelt.

Zusammenfassung

• Asynchrones JavaScript verhindert, dass Ihre App langsam wird und nicht mehr reagiert, indem es Ihrem Code ermöglicht, mehrere Aufgaben gleichzeitig zu erledigen.
• Rückrufe sind Funktionen, die nach Abschluss einer asynchronen Aufgabe ausgeführt werden, bei komplexen Aufgaben jedoch unübersichtlich werden können.
• Versprechen bieten eine sauberere Möglichkeit, asynchrone Vorgänge abzuwickeln, indem sie Aufgaben darstellen, die in der Zukunft erledigt werden.
• Async/Await ist eine moderne Syntax, die die Arbeit mit Versprechen einfacher und lesbarer macht.

Das Verständnis von asynchronem JavaScript ist für die Erstellung reaktionsfähiger, effizienter Webanwendungen unerlässlich, da es Ihrem Code ermöglicht, Aufgaben auszuführen, ohne beim Warten auf den Abschluss langsamer Vorgänge stecken zu bleiben.

Das obige ist der detaillierte Inhalt vonAsynchrones JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!