React AJAX

In React-Anwendungen können AJAX-Anfragen mithilfe der fetch-API oder von Drittanbieter-Bibliotheken wie axios, jQuery und anderen für Netzwerkanfragen implementiert werden.

Im Folgenden werden diese beiden Methoden grundlegend erklärt:

Verwendung der fetch-API für AJAX-Anfragen

fetchist eine im Browser integrierte API für Netzwerkanfragen. Das Folgende verwendetfetchGrundlegende Schritte zum Ausführen einer AJAX-Anfrage in einer React-Komponente:

  • fetch importieren- Wenn Sie einen modernen Browser verwenden, müssen Sie ihn normalerweise nicht importieren.fetch. Wenn Sie jedoch ältere Browser unterstützen müssen, können Sieunfetcheinen solchen Polyfill verwenden.

  • Verwendung des useEffect-Hooks- VerwendenuseEffectHook, um Seiteneffekte wie Netzwerkanfragen zu behandeln.

  • Eine Anfrage stellen- Verwendenfetchum GET- oder POST-Anfragen zu stellen.

  • Antwort verarbeiten- Verwenden.then()um die Antwortdaten zu verarbeiten.

  • Fehlerbehandlung- Verwenden.catch()um Fehler abzufangen und zu behandeln.

  • State aktualisieren- VerwendenuseStateHook, um die angeforderten Daten zu speichern und den State zu aktualisieren, nachdem die Anfrage erfolgreich war.

Beispiel

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error('Fehler beim Abrufen der Daten:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Lädt...</div>;
  }

  return (
    <div>
      <h1>Daten von API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Erklärung:

  • useState und useEffect: VerwendeuseStatezum Speichern der von der AJAX-Anfrage zurückgegebenen Datendata) und Ladezustandloading) und verwendenuseEffectzum Ausführen der AJAX-Anfrage, nachdem die Komponente geladen wurde.

  • fetch: Verwendefetchum eine GET-Anfrage zu stellen, und verwenderesponse.json()zum Parsen der zurückgegebenen JSON-Daten in JavaScript-Objekte.

  • Asynchrone Verarbeitung: Verwendeasync/awaitum asynchrone Operationen zu handhaben und sicherzustellen, dass der Zustand aktualisiert wird, nachdem die Anfrage abgeschlossen ist.

  • Fehlerbehandlung: Infetch-Anfrage, verwendetry/catchum Fehler abzufangen und zu behandeln, die auftreten können.

Verwendung von axios

axios ist ein Promise-basierter HTTP-Client für Browser und Node.js.

Im Folgenden finden Sie die grundlegenden Schritte zur Verwendung von axios:

  1. axios installieren- axios über npm oder yarn installieren.

    npm install axios

  2. axios importieren- axios in der Komponente importieren.

  3. Eine Anfrage stellen- Verwenden Sie axios, um GET- oder POST-Anfragen zu stellen.

  4. Antworten und Fehler behandeln- Verwenden Sie.then()und.catch(), um Antworten zu verarbeiten und Fehler abzufangen.

  5. State aktualisieren- Ähnlich wie bei der Verwendung vonfetchverwenden Sie auf ähnliche WeiseuseState, um den State zu aktualisieren.

Beispiel

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Fehler beim Abrufen der Daten:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Lädt...</div>;
  }

  return (
    <div>
      <h1>Daten von API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

jQuery Online-Test verwenden

Das folgende Beispiel zeigt, wie die neueste Gist-Share-Beschreibung eines GitHub-Benutzers abgerufen wird:

Daten in React-Komponenten können in der Methode componentDidMount über Ajax abgerufen werden. Wenn Daten vom Server abgerufen werden, können sie im State gespeichert werden, und anschließend kann die UI mit der Methode this.setState neu gerendert werden.

Beim asynchronen Laden von Daten verwenden Sie componentWillUnmount, um nicht abgeschlossene Anfragen abzubrechen, bevor die Komponente unmountet wird.

React-Beispiel

class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } componentDidMount() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); } componentWillUnmount() { this.serverRequest.abort(); } render() { return ( <div> {this.state.username}Die neueste geteilteGist-Adresse des Benutzers:a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <UserGist source="https://api.github.com/users/octocat/gists" /> );

Ausprobieren »

Der obige Code verwendet jQuery, um die Ajax-Anfrage abzuschließen.

Andere Erweiterungen