Zum Inhalt springen
Astrid

Bibliotheken von Drittanbietern in React

Bibliotheken von Drittanbietern in React

Wir nutzen die Fetch-API, um die Hacker News-API abzufragen. Diese wird leider nicht von allen Browsern zuverlässig unterstützt. Insbesondere bei alten Versionen ist die Browserkompatibilität lückenhaft. Spätestens sobald du deine Anwendung in einer Headless-Browser-Umgebung testest, werden Probleme mit der Fetch-API auftreten. Es gibt verschiedene Möglichkeiten, das Abrufen in älteren Browsern mithilfe von (Polyfills) und die Ausführung in Tests (somorphic fetch) zum Laufen zu bringen. Die genauere Erklärung der Konzepte würde den Rahmen dieses Buchs sprengen.

Eine andere Alternative besteht darin, die Fetch-API durch eine stabile Drittanbieter Bibliothek zu ersetzten. Da das Integrieren von externen Modulen Thema dieses Abschnitts ist, schlagen wir im folgenden zwei Fliegen mit einer Klappe. Wir ersetzen die Fetch-API mit dem HTTP-Client axios, welcher asynchrone Anforderungen unterstützt. In diesem Abschnitt lernst du, wie du eine Bibliothek --- in unserem Fall die Fetch-API, eine native API des Browsers --- durch ein Node.js-Module ersetzt. Installiere zunächst axios mithilfe der Befehlszeile:

{title=“Command Line”,lang=“text”}

npm install axios

Importieren danach Axios in deine Anwendung:

import React from 'react';
# start-insert
import axios from 'axios';
# end-insert

...

Jetzt ist es dir möglich, axios anstelle der Fetch-API zu verwenden. Die Anwendung ist ähnlich wie zuvor. Axios nimmt die URL als Argument entgegen und gibt ein Promise-Objekt zurück. Es ist nicht mehr erforderlich, die zurückgegebene Antwort in JSON umzuwandeln, da axios das Ergebnis in ein JavaScript-Objekt einschließt. Passen wir den Beispielcode im nächsten Schritt an die Verwendung von axios an:

const App = () => {
  ...

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

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

  ...
};

In diesem Code führen wir mit axios.get() eine HTTP-GET-Anfrage aus. Es handelt sich um dieselbe HTTP-Methode, die wir mit der Fetch-API verwendeten. axios ist intuitiv aufgebaut: Für eine HTTP-POST-Anfrage verwendest du axios.post().

Sieh dir die von axios zurückgegebenen Daten in der Konsole deines Browsers an, indem du die nachfolgende Zeile temporär im Code ergänzt:

const App = () => {
  ...

    axios
      .get(url)
      .then(result => {
# start-insert
          console.log(result.data.hits);
# end-insert
        dispatchStories({
          type: 'STORIES_FETCH_SUCCESS',

  ...
};

Wie du sieht: axios ist eine leistungsstarke Bibliothek zum Zugriff auf Remote-APIs. Ich empfehle dir diese anstelle der nativen Abruf-API, wenn deine Anforderungen komplex sind, es dir wichtig ist, älteren Browser zu unterstützen und/oder du ein Framework zum Testen verwendest.

Übungen: