https://github.com/hannahnier/async-fetching

https://github.com/hannahnier/async-fetching

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/hannahnier/async-fetching
• Owner: hannahnier
• Created: 2024-04-18T09:23:32.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-29T11:33:02.000Z (7 months ago)
• Last Synced: 2024-10-05T13:46:59.947Z (about 1 month ago)
• Language: JavaScript
• Size: 63.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fetching mit `async/await`

## Wozu das Ganze?

Während wir (zum Beispiel beim Fetching) auf eine Antwort vom Server warten, soll unser synchroner Code nicht blockiert werden. Sobald wir die Antwort erhalten, möchten wir aber damit weiterarbeiten. Eine Möglichkeit dafür bietet `async/await`. Diese JavaScript-Keywords sind relativ neu und vereinfachen die asynchrone Programmierung deutlich.

## So funktioniert es

In unserem Beispiel verwenden wir `async` und `await` zusammen mit `fetch`, um Daten von einer API abzurufen, die eine Liste von Brauereien bereithält.

```javascript

const getData = async () => {

  const res = await fetch("https://api.openbrewerydb.org/v1/breweries");

  const dataJson = await res.json();

  console.log(dataJson);

};

getData();

```

- **`async`** definiert eine Funktion als asynchron und stellt sicher, dass sie ein Promise zurückgibt.

- **`await`** kann nur innerhalb einer `async`-Funktion verwendet werden.

  Durch Verwendung von `await` wird die Ausführung des Codes blockiert, bis die Daten verfügbar sind und das Promise erfüllt/abgelehnt ist. Danach wird die Ausführung der `async`-Funktion ganz normal fortgesetzt.

#### Fehlerbehandlung mit Try-Catch

Um Fehler in asynchronem Code mit async/await zu behandeln, verwenden wir `try-catch`. Wenn der Im `catch`-Block können wir Fehler ausgeben oder behandeln. Wenn das Fetch-Promise abgelehnt wird, zum Beispiel aufgrund eines Netzwerkfehlers oder einer ungültigen API-Antwort, wird der Fehler im `catch`-Block behandelt und zum Beispiel in der Konsole ausgegeben:

```javascript

const getData = async () => {

  try {

    const res = await fetch(url);

    const dataJson = await res.json();

    ...

  } catch (error) {

    console.log(error);

  }

};

```

#### Besonderheit in `React`

In `React` werden Komponenten oft neu gerendert, sobald sich States oder Props ändern. Damit das Fetching nicht bei jedem neuen Rendern wiederholt wird, sollte der gesamte `fetch`-Block in eine `useEffect`-Hook eingebettet werden:

```javaScript

useEffect(() => {

    const getData = async () => {

      try {

        const res = await fetch(url);

        ...

      } catch (error) {

        console.log(error);

      }

    };

    getData();

  }, []);

```

#### Vorteile von `async/await` gegenüber `.then`

Der größte Vorteil von `async/await` gegenüber der Verwendung von `.then`-Ketten ist die Lesbarkeit. Mit `async/await` sieht asynchroner Code fast synchron aus, besteht nur aus wenigen Code-Zeilen und ist dadurch leichter zu lesen.

Außerdem bietet `async/await` sehr gute Debugging-Möglichkeiten.