Heim >Web-Frontend >js-Tutorial >Wie kann ich in JavaScript auf Werte von asynchronen Funktionen warten und diese zurückgeben?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-11 10:43:03590Durchsuche

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());

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);
})();

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');
}

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

(async () => {
    console.log(await getData());
})();

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!

Stellungnahme:
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