Articles
Einführung in JavaScript
Async/Await in JavaScript

Async/Await in JavaScript

In diesem Artikel erklären wir Async/Await in JavaScript.

YouTube Video

Async/Await in JavaScript

async (und await) in JavaScript sind Funktionen, die entwickelt wurden, um das Schreiben asynchroner Operationen intuitiver und lesbarer zu gestalten. Durch die Verwendung dessen können Sie die Komplexität traditioneller Callback-Funktionen und Promise-Ketten verringern und asynchronen Code so schreiben, dass er wie synchroner Code aussieht.

async-Funktion

async wird verwendet, um eine Funktion als asynchron zu definieren. Eine async-Funktion gibt immer ein Promise zurück. Innerhalb einer Funktion, die mit async gekennzeichnet ist, können Sie await verwenden, um auf das Ergebnis eines Promises zu warten.

Grundsyntax einer async-Funktion 

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

In diesem Fall gibt der Aufruf von myAsyncFunction() automatisch ein Promise-Objekt zurück. Wenn das Promise erfüllt wird, wird das Ergebnis der Wert, der von return zurückgegeben wird.

Beispiel: Basis-async-Funktion 

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await wird verwendet, um auf die Erfüllung eines Promises zu warten. Mit await können Sie die Ausführung pausieren, bis das Promise erfüllt ist, und das Ergebnis des Promises entgegennehmen. await kann nur innerhalb einer async-Funktion verwendet werden.

Beispiel: Verwendung von await 

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Im obigen Beispiel wartet die Funktion mit await auf das von der fetch-Funktion zurückgegebene Promise und führt dann weitere asynchrone Operationen mit dem Ergebnis aus.

Fehlerbehandlung mit async/await

Wenn ein Fehler innerhalb einer async-Funktion auftritt, wird dieser Fehler als reject des Promises behandelt. Sie können try...catch-Anweisungen verwenden, um eine Fehlerbehandlung durchzuführen.

Beispiel: Fehlerbehandlung 

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Durch die Verwendung eines try...catch-Blocks können Sie Fehler abfangen, die während asynchroner Operationen auftreten, und verhindern, dass das Programm bei Fehlern abstürzt.

Vorteile von async/await

Im Vergleich zu traditionellen Promise-Ketten bietet async/await folgende Vorteile:.

  • Verbesserte Lesbarkeit
    • Asynchrone Abläufe können wie synchroner Code geschrieben werden, wodurch die Komplexität von tief verschachtelten Promise-Ketten und Callbacks vermieden wird.
  • Einfacheres Debugging
    • Da es synchronem Code ähnelt, werden Debugging und Fehlerbehandlung einfacher.
  • Bessere Wartbarkeit
    • Asynchrone Prozesse können einfacher geschrieben werden, wodurch Änderungen oder Anpassungen des Codes erleichtert und die langfristige Wartbarkeit verbessert werden.

Beispiel: Promise-Kette vs async/await

Vergleichen wir Code, der Promise-Ketten verwendet, mit Code, der async/await nutzt.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Wie Sie sehen können, ermöglicht die Verwendung von async/await das lineare Schreiben asynchroner Prozesse, was zu einem besser lesbaren Code führt.

Mehrere asynchrone Operationen gleichzeitig ausführen

Durch die Kombination von Promise.all() oder Promise.race() mit await können mehrere asynchrone Operationen gleichzeitig ausgeführt und ihre Ergebnisse zusammen verarbeitet werden.

Promise.all() 

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();
  • Promise.all() löst mehrere Promises gleichzeitig aus und liefert deren Ergebnisse als Array zurück. Es wartet, bis alle Promises erfüllt sind, und wenn eines fehlschlägt, wird dies insgesamt als Fehlschlag betrachtet.

Promise.race() 

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();
  • Promise.race() gibt das Ergebnis des ersten Promises zurück, das entweder erfüllt oder abgelehnt wird. Es ist nützlich, wenn Sie auf die asynchrone Operation reagieren möchten, die zuerst abgeschlossen wird. Wenn das erste Promise jedoch fehlschlägt, wird der Fehler sofort von catch abgefangen.

Promise.allSettled() 

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();
  • Promise.allSettled() wartet auf alle Ergebnisse, unabhängig davon, ob sie erfolgreich oder fehlgeschlagen sind. Jedes Ergebnis wird in der Form { status, value } oder { status, reason } zurückgegeben, sodass Sie erkennen können, welche Promises erfolgreich und welche fehlgeschlagen sind.

Promise.any() 

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();
  • Promise.any() gibt nur das Ergebnis des ersten erfolgreich erfüllten Promises zurück. Eine Ausnahme wird nur ausgelöst, wenn alle Promises fehlschlagen. Es kann wie ein Wiederholungsmechanismus in Umgebungen verwendet werden, in denen einige APIs unzuverlässig sind, bis eine erfolgreich ist.

Zusammenfassung

  • async-Funktion: Gibt immer ein Promise zurück und wird für das Schreiben von asynchronen Verarbeitungen verwendet.
  • await: Wird verwendet, um auf die Erfüllung eines Promises zu warten und dessen Ergebnis zu empfangen.
  • Fehlerbehandlung: Verwenden Sie try...catch, um Fehler zu behandeln, die während der asynchronen Verarbeitung auftreten.
  • Mehrere asynchrone Operationen: Durch Methoden wie Promise.all() können Sie mehrere asynchrone Aufgaben gleichzeitig ausführen.

async/await sind leistungsstarke Tools für die asynchrone Verarbeitung. Nutzen Sie sie, um komplexe asynchrone Logik zu vereinfachen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Promise-Klasse in JavaScriptGenerator-Funktionen in JavaScript