Daten in Ihrer React -Anwendung abrufen

reagieren, eine führende Bibliothek zum Erstellen dynamischer Webanwendungen, konzentriert sich hauptsächlich auf die View -Ebene innerhalb der MVC -Architektur. In diesem Tutorial wird ein grundlegender Aspekt der Webentwicklung untersucht: Daten in einer Reaktionsanwendung abrufen und Anzeigen. Wir werden verschiedene Strategien für Daten abrufen, deren Vor- und Nachteile sowie Best Practices für die Integration in Ihre Projekte. Am Ende verstehen Sie, wie Sie das Abrufen von Daten in Ihren React -Anwendungen effizient verwalten können.

Erste Schritte

Beginnen wir zunächst eine grundlegende React -App mit create-react-app:

erstellen

create-react-app react-data-fetcher

Dieser Befehl erzeugt eine umfassende Projektstruktur. In der Datei README finden Sie detaillierte Informationen zu create-react-app.

Ein einfacher Server

Für Demonstrationszwecke bietet ein einfacher Server (eine Python 3 -Anwendung, die das Framework und die Wiederbelebung für Datenpersistenz verwendet) eine Remote -API zum Abholen von Zitaten. Die Einfachheit der API ermöglicht es uns, uns auf den React -Datenabrufprozess zu konzentrieren. hug

Die

-Komponente QuoteList

Die

-Funktionskomponente rendert eine kugele Liste von Zitaten und akzeptiert eine Reihe von Zeichenfolgen als Eingabe: QuoteList

import React from 'react';

const QuoteList = ({ quotes }) => (
  quotes.map(quote => 

{quote}

) ); export default QuoteList; Diese Komponente ist ein Kind der Hauptkomponente, in der das bedingte Rendering basierend auf dem Datenabrufstatus verwendet wird.

App Daten abrufen mit Axios

Die Funktion

unter Verwendung von Axios zeigt asynchrones Datenabruf:

fetchQuotes

Die Funktion

fetchQuotes = () => {
    this.setState({ ...this.state, isFetching: true });
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({ quotes: response.data, isFetching: false }))
      .catch(e => console.log(e));
};

zeigt eine einfache Postanforderung mit Axios:

handleSubmit

Axios gegen Fetch: Ein Vergleich

handleSubmit = event => {
    axios.post(this.props.quote_service_url, { 'quote': this.state.quote })
      .then(r => console.log(r))
      .catch(e => console.log(e));
    event.preventDefault();
};

In diesem Abschnitt wird wichtige Unterschiede zwischen Axios und der nativen

API hervorgehoben. Axios vereinfacht die JSON-Datentransformation und bietet integrierte Funktionen wie Timeout-Handhabung und HTTP-Interceptors an der Anfrage, was

fehlt. Die Interceptors von Axios bieten einen zentralisierten Mechanismus zum Ändern von Anforderungen und Antworten und Verbesserung der Wartbarkeit des Code. Das Beispiel zeigt, wie Axios -Interceptors verwendet werden. Das Tutorial stellt auch die Handhabung mehrerer gleichzeitiger Anforderungen mit fetch und fetch mit axios.all. Promise.all kontrastiert fetch Schlussfolgerung

Dieses Tutorial umfasste asynchrone Daten, die in React abrufen, einschließlich Lebenszyklusmethoden, Umfragen, Fortschrittsberichterstattung und Fehlerbehandlung. Ein Vergleich von Axios und der

api zeigte ihre jeweiligen Stärken und Schwächen. Die bereitgestellten Informationen ermöglichen es Ihnen, das Abrufen von Daten in Ihren React -Anwendungen effektiv zu verwalten.

fetch

Dieser Beitrag wurde mit Beiträgen von Divya Dev.

aktualisiert

Das obige ist der detaillierte Inhalt vonDaten in Ihrer React -Anwendung abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!