Zum Inhalt springen
Astrid

Async/Await in React (fortgeschrittene Anleitung)

Async/Await in React (fortgeschrittene Anleitung)

Wirst du häufig mit asynchronen Daten arbeiten? Dann ist es hilfreich, wenn du die alternative Syntax für die Behandlung von Promise-Objekten kennst: async/await. Aus diesem Grund habe ich die Funktion handleFetchStories in unserem Beispiel überarbeitet. Mein Refactoring zeigt dir, wie du idealerweise vorgehst. Eine Fehlerbehandlung lasse ich im ersten Schritt der Übersicht halber außen vor:

const App = () => {
  ...

# start-insert
  const handleFetchStories = React.useCallback(async () => {
# end-insert
    dispatchStories({ type: 'STORIES_FETCH_INIT' });

# start-insert
    const result = await axios.get(url);
# end-insert

# start-insert
    dispatchStories({
      type: 'STORIES_FETCH_SUCCESS',
      payload: result.data.hits,
    });
# end-insert
  }, [url]);

  ...
};

Unsere Funktion verwendet das Schlüsselwort async. Dies schafft die Grundlage für die Verwendung von async/await. Sobald du await einsetzt, verhält sich alles analog zu synchronem Code. Die Anweisungen, die hinter await steht, werden erst aufgerufen, wenn das (in axios gekapselte) Promise-Objekt aufgelöst wurde und somit sein Ergebnis vorliegt. Dies bedeutet, dass der Code wartet --- wie das Wort await vermuten lässt.

const App = () => {
  ...

  const handleFetchStories = React.useCallback(async () => {
    dispatchStories({ type: 'STORIES_FETCH_INIT' });

# start-insert
    try {
# end-insert
      const result = await axios.get(url);

      dispatchStories({
        type: 'STORIES_FETCH_SUCCESS',
        payload: result.data.hits,
      });
# start-insert
    } catch {
      dispatchStories({ type: 'STORIES_FETCH_FAILURE' });
    }
# end-insert
  }, [url]);

  ...
};

Mithilfe von try und catch haben wir im zweiten Schritt die Fehlerbehandlung integriert. Wenn im try-Block etwas nicht korrekt abläuft, springt der Code in den catch-Block. Der Code hier ist einzig und allein dazu da, den Fehler abzufangen --- ihn zu korrigieren. Neben async/await mit try/catch-Blöcken ist die then()-Methode für die Behandlung von Fehlern in asynchronen Daten möglich.

Übungen: