Verwenden von Axios mit React

Einführung

Viele Projekte im Web müssen in einer bestimmten Phase ihrer Entwicklung mit einer REST-API verbunden werden. Axios ist ein leichter HTTP-Client, der auf dem Dienst $http innerhalb von Angular.js v1.x basiert und dem nativen JavaScript Fetch API ähnlich ist.

Axios ist Zusage-basiert, was Ihnen die Möglichkeit bietet, die Vorteile von async und await von JavaScript zu nutzen, um einen lesbareren asynchronen Code zu erhalten.

Sie können Anfragen auch abfangen und abbrechen, und es gibt einen integrierten Schutz auf Client-Seite gegen die Fälschung von Cross-Site-Anfragen.

In diesem Artikel sehen Sie Beispiele für die Verwendung von Axios für den Zugriff auf die beliebte JSON Placeholder-API innerhalb einer React-Anwendung.

Voraussetzungen

Um diesem Artikel folgen zu können, benötigen Sie Folgendes:

• Auf Ihrem Computer installiertes Node.js Version 10.16.0. Um dies unter MacOS oder Ubuntu 18.04 zu installieren, folgen Sie den Schritten in Installation von Node.js und Erstellen einer lokalen Entwicklungsumgebung auf MacOS oder dem Abschnitt Installation unter Verwendung eines PPA von Installation von Node.js auf Ubuntu 18.04.
• Ein neues React-Projekt, das mit der Create React App eingerichtet wird, indem Sie dem Tutorial Einrichten eines React-Projekts mit Create React App folgen.
• Es wird auch dazu beitragen, Ihnen ein Grundverständnis über JavaScript zu vermitteln, das Sie in der Reihe Codieren mit JavaScript finden können, zusammen mit dem grundlegenden Wissen über HTML und CSS.

Schritt 1 — Hinzufügen von Axios zum Projekt

In diesem Abschnitt fügen Sie Axios dem React-Projekt digital-ocean-tutorial hinzu, das Sie entsprechend dem Tutorial Einrichten eines React-Projekts mit Create React App erstellt haben.

Um Axios zu dem Projekt hinzuzufügen, öffnen Sie Ihr Terminal und wechseln Sie die Verzeichnisse in Ihrem Projekt:

cd digital-ocean-tutorial

Führen Sie zur Installation von Axios dann diesen Befehl aus:

npm install axios

Als Nächstes müssen Sie Axios in die Datei importieren, in der Sie es verwenden möchten.

Schritt 2 — Erstellen einer GET-Anfrage

In diesem Beispiel erstellen Sie eine neue Komponente und importieren Axios in diese, um eine GET-Anfrage zu senden.

Erstellen Sie im Ordner src Ihres React-Projekts eine neue Komponente namens PersonList.js:

nano src/PersonList.js

Fügen Sie den folgenden Code zu der Komponente hinzu:

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Zuerst importieren Sie React und Axios, sodass beide in der Komponente verwendet werden können. Dann haken Sie sich in den Lifecyle-Hook componentDidMount und führen eine GET-Anfrage aus.

Sie verwenden axios.get(url) mit einer URL aus einem API-Endpunkt, um eine Zusage zu erhalten, die ein Antwortobjekt zurückgibt. Innerhalb des Antwortobjekts gibt es Daten, die dann dem Wert von person zugewiesen werden.

Sie können auch andere Informationen über die Anfrage erhalten, wie den Statuscode unter res.status oder mehr Informationen innerhalb von res.request.

Schritt 3 — Erstellen einer POST-Anfrage

In diesem Schritt verwenden Sie Axios mit einem anderen HTTP-Anfrageverfahren namens POST.

Entfernen Sie den vorherigen Code in PersonList und fügen Sie Folgendes hinzu, um ein Formular zu erstellen, das die Benutzereingaben ermöglicht und anschließend den Inhalt mittels POST an eine API sendet:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Innerhalb der Funktion handleSubmit verhindern Sie die Standardaktion des Formulars. Aktualisieren Sie dann den state auf die user-Eingabe.

Mit der Verwendung von POST erhalten Sie das gleiche Antwortobjekt mit Informationen, die Sie innerhalb eines then-Abrufs verwenden können.

Um die POST-Anfrage abzuschließen, erfassen Sie zunächst die user-Eingabe. Dann fügen Sie die Eingabe zusammen mit der POST-Anfrage hinzu, wodurch Sie eine Antwort erhalten. Anschließen können Sie die Antwort in console.log protokollieren, wobei die user-Eingabe im Formular angezeigt werden sollte.

Schritt 4 — Erstellen einer DELETE-Anfrage

In diesem Beispiel sehen Sie, wie Elemente aus einer API unter Verwendung von axios.delete gelöscht werden und eine URL als ein Parameter übergeben wird.

Ändern Sie den Code für das Formular aus dem POST-Beispiel, um einen Benutzer zu löschen, anstatt einen neuen hinzuzufügen:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Auch hier gibt Ihnen das res-Objekt Informationen über die Anfrage. Nach der Übermittlung des Formulars können Sie dann diese Informationen erneut in console.log protokollieren.

Schritt 5 — Verwenden einer Basisinstanz in Axios

In diesem Beispiel sehen Sie, wie Sie eine Basisinstanz einrichten können, in der Sie eine URL und alle anderen Konfigurationselemente definieren können.

Erstellen Sie eine separate Datei namens api.js:

nano src/api.js

Exportieren Sie eine neue axios-Instanz mit diesen Standardeinstellungen:

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

Sobald die Standardinstanz eingerichtet ist, kann sie dann innerhalb der Komponenten PersonList verwendet werden. Sie importieren die neue Instanz wie folgt:

import React from 'react';
import axios from 'axios';

import API from '../api';

export default class PersonList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

Da http://jsonplaceholder.typicode.com/ nun die Basis-URL ist, müssen Sie nicht länger die gesamte URL eingeben, wenn Sie einen anderen Endpunkt auf der API treffen möchten.

Schritt 6 — Verwenden von async und await

In diesem Beispiel sehen Sie, wie Sie async und await verwenden können, um mit Zusagen zu arbeiten.

Das Schlüsselwort await löst die Zusage promise aus und gibt den Wert value zurück. Der Wert value kann dann einer Variablen zugewiesen werden.

handleSubmit = async event => {
  event.preventDefault();

  //
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};

In diesem Code-Beispiel wird das .then() ersetzt. Die Zusage promise wird aufgelöst und der Wert wird in der Variable response gespeichert.

Zusammenfassung

In diesem Tutorial haben Sie mehrere Beispiele für die Verwendung von Axios innerhalb einer React-Anwendung zur Erstellung von HTTP-Anfragen und zur Handhabung von Antworten untersucht.

Wenn Sie mehr über React erfahren möchten, lesen Sie die Reihe Codieren in React.js oder sehen Sie sich die React-Themenseite für weitere Übungen und Programmierprojekte an.