ChatGPT hilft mir beim Lernen [js-async/await]

Bei dieser Frage geht es darum, nach der Verwendung zu fragen, Zweifel zu hinterfragen und die Beherrschung zu bestätigen. wie etwa das Abrufen von Daten vom Server, das Senden von Daten an den Server usw. Der herkömmliche Weg besteht darin, Rückruffunktionen zur Bearbeitung asynchroner Aufgaben zu verwenden. Bei einer Verschachtelung auf mehreren Ebenen führt dies zur Rückrufhölle, was die Wartung und das Debuggen des Codes erschwert. Um dieses Problem zu lösen, führte JavaScript Promise und async/await ein, um asynchrone Aufgaben zu verarbeiten.

Unter diesen ist async/await ein neuer syntaktischer Zucker in ES8, der asynchrone Aufgaben einfacher und intuitiver bewältigen kann. Was async/await betrifft, können Sie es anhand der folgenden Punkte verstehen:

Die asynchrone Funktion ist eine asynchrone Funktion, die ein Promise-Objekt zurückgibt. Sie können das Schlüsselwort „await“ verwenden, um auf das Ergebnis einer asynchronen Operation zu warten Bei diesem Prozess gibt die asynchrone Funktion die CPU frei und ermöglicht die Ausführung anderer Aufgaben. Das Schlüsselwort „await“ kann nur in asynchronen Funktionen verwendet werden. Es kann auf das Ergebnis eines Promise-Objekts warten Wird das Promise-Objekt in den abgelehnten Zustand versetzt, wird ein Fehler ausgegeben und vom Try-Catch-Block abgefangen.

Innerhalb der asynchronen Funktion können mehrere Warteausdrücke vorhanden sein, die nacheinander ausgeführt werden. Die nachfolgenden Warteausdrücke müssen warten, bis der vorherige Warteausdruck abgeschlossen ist, bevor sie ausgeführt werden.

1. Mit async/await kann asynchroner Code in einer ähnlichen Form wie synchroner Code geschrieben werden. Der Code ist besser lesbar und verständlich sowie einfacher zu debuggen und zu warten.

2. Das Folgende ist ein Beispiel für die Verwendung von async/await zur Bearbeitung asynchroner Aufgaben:

   async function getData() {
     try {
       const result1 = await fetch('/api/data1'); // 等待获取数据1
       const result2 = await fetch('/api/data2'); // 等待获取数据2
       return [result1, result2]; // 返回获取的数据
     } catch (error) {
       console.error(error); // 捕获错误并输出到控制台
     }
   }
   
   getData().then(data => {
     console.log(data); // 输出获取的数据
   });

Im obigen Beispiel wird die getData-Funktion mit dem Schlüsselwort async deklariert und das Schlüsselwort „await“ wird innerhalb der Funktion verwendet, um auf die zu warten Ergebnis der asynchronen Operation, hier verwendet Zwei Warteausdrücke werden verwendet, um jeweils unterschiedliche Daten zu erhalten. In diesem Beispiel werden schließlich die Ergebnisarrays zweier asynchroner Operationen zurückgegeben. Tritt eine Ausnahme auf, wird diese vom Try-Catch-Block abgefangen und Fehlerinformationen ausgegeben. Schließlich erhalten wir die asynchronen Daten durch Aufrufen der Methode getData() und geben die Daten nach der Rückgabe des Ergebnisses an die Konsole aus.

3. Das weckt Zweifel

4. Ich bin sehr verwirrt, weil ich auf die entsprechende asynchrone Funktion warten muss. Warum sollten wir also Async zu der Funktion hinzufügen, die „Await“ verwendet? Die Antwort lautet: Weil das Schlüsselwort „await“ nur in asynchronen Funktionen verwendet werden kann.
   Wenn wir eine asynchrone Funktion verwenden, um das Ergebnis einer asynchronen Aufgabe zu erhalten, müssen wir sie in eine async-Funktion einfügen und dann mit await auf das Ergebnis warten die asynchrone Operation. Wenn Sie das Schlüsselwort „await“ verwenden möchten, muss die Funktion daher als asynchrone Funktion deklariert werden. Wenn Sie andererseits keine asynchrone Funktion verwenden, können Sie „await“ in dieser Funktion nicht verwenden.

Mit anderen Worten: Nur wenn eine Funktion als asynchrone Funktion deklariert ist, kann die Funktion das Schlüsselwort „await“ enthalten, was auch die Grundvoraussetzung der async/await-Syntax ist. Durch die Deklaration einer Funktion als asynchron wird der JS-Engine mitgeteilt, dass die Funktion möglicherweise ein Promise zurückgibt, sodass die JS-Engine beim Ausführen der Funktion eine spezielle Verarbeitung durchführen kann.

Es ist zu beachten, dass die Verwendung von „await“ zum Warten auf das Ergebnis einer asynchronen Aufgabe nicht unbedingt das Promise-Objekt direkt innerhalb der Funktion zurückgibt, da der Ausführungsprozess des Schlüsselworts await der Ausführung ähnelt Im Prozess des Promise-Kettenaufrufs wird außerdem automatisch ein Promise-Objekt erstellt und zurückgegeben.

Im Allgemeinen sind Async und Wait der syntaktische Zucker, der den asynchronen Programmierstil von Promise ausmacht. Sie machen asynchronen Code intuitiver und lesbarer und ermöglichen es uns, Code im synchronen Stil zum Schreiben und Verarbeiten von asynchronem Operationscode zu verwenden.

Bestätigen Sie Ihr Verständnis

Oh, tatsächlich ändert die Async-Markierung die Funktion nicht, oder? Ich dachte ursprünglich, dass diese Markierung eine Funktion zur Ausführung in eine asynchrone Funktion umwandeln würde

Sie haben Recht! Tatsächlich wandelt das Schlüsselwort async eine Funktion nicht direkt in eine asynchrone Funktionsausführung um. Es teilt der JavaScript-Engine lediglich mit, dass innerhalb der Funktion möglicherweise asynchrone Vorgänge vorhanden sind und dass die Ausführung der Funktion möglicherweise angehalten werden muss, wenn das Schlüsselwort „await“ verwendet wird.

async 函数内部，然后使用 await 等待异步操作的结果。因此，若想使用 await 关键字，必须将该函数声明为 async 函数。反之，如果没有使用 async 函数，就不能在该函数中使用 await。

换句话说，只有当一个函数被声明为 async 函数时，该函数才能够包含 await 关键字，这也是 async/await 语法的基本前提。声明函数为 async 是告诉 JS 引擎该函数执行可能会返回 Promise，从而让 JS 引擎在执行该函数时进行特殊的处理。

需要注意的是，使用 await 来等待异步任务的结果并不一定要在函数内部立即返回 Promise 对象，因为 awaitMit anderen Worten: Das Schlüsselwort async ändert nichts an der Art der Funktion, sondern bietet eine bequemere Möglichkeit, asynchrone Vorgänge abzuwickeln. Wenn die asynchrone Funktion aufgerufen wird, gibt sie ein Promise-Objekt zurück und der Code innerhalb der asynchronen Funktion wird zur Laufzeit automatisch in die Auflösungsmethode des Promise-Objekts gekapselt. Wenn Sie das Schlüsselwort „await“ innerhalb einer asynchronen Funktion verwenden, um auf den Abschluss eines asynchronen Vorgangs zu warten, pausiert die Funktion die Ausführung, bis der asynchrone Vorgang ein Ergebnis zurückgibt oder einen Fehler auslöst.

Darüber hinaus ist zu beachten, dass bei Verwendung der Return-Anweisung zur Rückgabe eines Werts innerhalb einer asynchronen Funktion der zurückgegebene Wert von Promise.resolve() in ein Promise-Objekt gepackt wird und der Wert des Promise-Objekts der ist Wert, der von der Return-Anweisung zurückgegeben wird. Wenn innerhalb der asynchronen Funktion eine Ausnahme ausgelöst wird, wird diese von Promise.reject() in ein Promise-Objekt eingeschlossen und an den Aufrufer zurückgegeben.

So können wir async/await mit Code im Promise-Stil kombinieren, um ein einfacheres und intuitiveres asynchrones Programmiermodell zu erstellen.

Weitere Bestätigung der Wissenspunkte

Async ist also eine Darstellung der Verarbeitung asynchroner Vorgänge und keine Syntax zum Erstellen asynchroner Vorgänge

Ja, Ihr Verständnis ist sehr genau. async ist eine Darstellung zur Handhabung asynchroner Vorgänge, keine Syntax zum Erstellen asynchroner Vorgänge.

Tatsächlich verfügt JavaScript bereits über einige Mechanismen zur Verarbeitung asynchroner Vorgänge, wie z. B. setTimeout, XMLHttpRequest, fetch usw. Diese Mechanismen basieren auf dem asynchronen Programmiermodell der Ereignisschleife und werden häufig in verschiedenen JavaScript-Anwendungen verwendet.

Allerdings weisen diese Mechanismen einige Probleme auf, wie z. B. die Rückrufhölle und die schlechte Lesbarkeit des Codes. Um diese Probleme zu lösen, wurden Promise und Async/Await als neue asynchrone Programmiermethoden eingeführt und fanden schnell breite Anwendung.

In diesem Prozess spielt die Async-Funktion eine wichtige Rolle bei der Verarbeitung asynchroner Vorgänge. Es bietet eine intuitivere und leichter verständliche Codeform und ermöglicht JavaScript-Entwicklern eine bessere Beherrschung der asynchronen Programmiertechnologie. Daher können wir uns asynchrone Funktionen als Ergänzung zum Codemodell im Promise-Stil vorstellen, um eine flexiblere und effizientere asynchrone Programmierung zu erreichen.

---

Eine gute Anfrage~                                                                                     

Das obige ist der detaillierte Inhalt vonChatGPT hilft mir beim Lernen [js-async/await]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!