Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich in JavaScript auf Werte von asynchronen Funktionen warten und diese zurückgeben?

Susan Sarandon
Freigeben: 2024-11-11 10:43:03
Original
561 Leute haben es durchsucht

How to Await and Return Values from Async Functions in JavaScript?

Wie man Werte von asynchronen Funktionen erwartet und zurückgibt

Bei der Arbeit mit asynchronen Funktionen können sich die zurückgegebenen Werte von synchronen Funktionen unterscheiden. In diesem Artikel untersuchen wir, wie man mit diesem Verhalten mit async-await umgeht.

Problem:

Angenommen, Sie haben eine asynchrone Funktion getData, die Daten von einem abruft API mit Axios. Um die Daten abzurufen und zu protokollieren, versuchen Sie es mit dem folgenden Code:

const axios = require('axios');
async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());
Nach dem Login kopieren

Anstatt die Daten zu protokollieren, erhalten Sie jedoch ein Versprechen mit einem ausstehenden Status.

Lösung :

Das Problem hierbei ist, dass Sie versuchen, das Ergebnis einer asynchronen Funktion außerhalb eines asynchronen Bereichs abzuwarten. Um dies zu beheben, müssen Sie console.log in einem asynchronen IIFE (Immediately Invoked Function Expression) kapseln:

async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}

(async () => {
    const result = await getData();
    console.log(result);
})();
Nach dem Login kopieren

Mit diesem Muster können Sie in einem asynchronen Bereich auf das Ergebnis der getData-Funktion warten.

Alternative Syntax:

Wenn Ihre asynchrone Funktion nicht auf die Rückgabe angewiesen ist B. ein Versprechen (z. B. Axios gibt ein Versprechen zurück), können Sie die Syntax vereinfachen, indem Sie die Schlüsselwörter „async“ und „await“ aus getData entfernen.

function getData() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}
Nach dem Login kopieren

Verwenden Sie dann dieselbe IIFE-Struktur wie zuvor, um auf das Ergebnis zu warten:

(async () => {
    console.log(await getData());
})();
Nach dem Login kopieren

Weitere Informationen:

Weitere Details zu async/await und asynchrone Programmierung in JavaScript finden Sie in den folgenden Ressourcen:

  • [Async/Await in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Operatoren/async_function)
  • [Asynchrone Programmierung in JavaScript](https://javascript.info/async-await)

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript auf Werte von asynchronen Funktionen warten und diese zurückgeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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