Heim > Web-Frontend > js-Tutorial > Warum geben asynchrone Funktionen in JavaScript ein Versprechen und nicht den Wert zurück?

Warum geben asynchrone Funktionen in JavaScript ein Versprechen und nicht den Wert zurück?

Barbara Streisand
Freigeben: 2024-10-18 10:47:03
Original
464 Leute haben es durchsucht

Why Do Async Functions in JavaScript Return a Promise and Not the Value?

Asynchrone Funktion gibt Versprechen zurück, nicht Wert: Enthüllung der Trennung

Asynchrone Programmierung in JavaScript hat eine Revolution in der Codeausführung herbeigeführt. Insbesondere asynchrone Funktionen sind zu einem beliebten Mittel zum Schreiben von Code geworden, der die Hauptereignisschleife nicht blockiert. Eine häufige Gefahr beim Umgang mit asynchronen Funktionen besteht jedoch darin, dass sie nicht direkt den Endwert, sondern ein Versprechen zurückgeben. Dies kann verwirrend sein, insbesondere für Entwickler, die mit der traditionellen synchronen Programmierung vertraut sind.

Um zu verstehen, warum sich asynchrone Funktionen so verhalten, ist es wichtig, das Konzept der JavaScript-Ereignisschleife zu verstehen. Die Ereignisschleife ist ein Single-Thread-System, das alle Aufgaben und Rückrufe im Browser oder in der Node.js-Umgebung verwaltet. Wenn eine asynchrone Funktion aufgerufen wird, gibt sie sofort ein Promise zurück. Das Versprechen stellt das letztendliche Ergebnis der asynchronen Aufgabe dar. Die Funktion selbst wartet jedoch nicht auf den Abschluss der Aufgabe, bevor sie das Versprechen zurückgibt. Dadurch kann nachfolgender Code weiterhin ausgeführt werden, ohne blockiert zu werden.

Betrachten Sie den folgenden Code:

async function fetchData() {
  const data = await fetch('https://example.com/data.json');
  return data;
}

fetchData().then((data) => {
  console.log(data);
});
Nach dem Login kopieren

In diesem Beispiel gibt die fetchData-Funktion ein Promise zurück, das das letztendliche Ergebnis des Abrufvorgangs darstellt . Die Funktion selbst wartet jedoch nicht auf den Abschluss des Abrufs, bevor sie das Versprechen zurückgibt. Daher wird die Anweisung console.log(data) erst ausgeführt, wenn das Promise aufgelöst ist.

Um auf den Endwert einer asynchronen Funktion zuzugreifen, müssen Sie die Methoden .then() oderawait verwenden. Die Methode .then() fügt eine Rückruffunktion hinzu, die ausgeführt wird, wenn das Versprechen aufgelöst wird. Im obigen Beispiel wird die Methode .then() verwendet, um die von der Funktion fetchData zurückgegebenen Daten zu drucken.

Alternativ können Sie das Schlüsselwort „await“ in einer anderen asynchronen Funktion verwenden, um auf die Auflösung des Promise zu warten. Dies ist nur innerhalb asynchroner Funktionen möglich, wie im folgenden Code gezeigt:

async function callFetchData() {
  const data = await fetchData();
  console.log(data);
}

callFetchData();
Nach dem Login kopieren

In diesem Beispiel verwendet die callFetchData-Funktion das Schlüsselwort „await“, um auf die Auflösung der fetchData-Funktion zu warten, bevor die Daten gedruckt werden.

Das Verständnis des Unterschieds zwischen dem Rückgabewert einer asynchronen Funktion und dem Versprechen, das sie darstellt, ist entscheidend für das Schreiben von effizientem und robustem asynchronem Code. Durch die Verwendung der .then()-Methode oder des Schlüsselworts „await“ können Sie auf den Endwert einer asynchronen Funktion zugreifen und häufige Fallstricke im Zusammenhang mit Promises vermeiden.

Das obige ist der detaillierte Inhalt vonWarum geben asynchrone Funktionen in JavaScript ein Versprechen und nicht den Wert zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
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