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://api.invalid-url.com/data');
 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.

Beispiel: Mehrere asynchrone Operationen gleichzeitig ausführen

 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, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

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.

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: Sie können mehrere asynchrone Operationen gleichzeitig mit Promise.all() 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