Mithilfe der Daten, die in Reaktion mit der Fetch API und des axios

0
47

Wenn Sie neu sind, zu Reagieren, und vielleicht haben Sie nur gespielt, um mit dem Aufbau zu tun und counter apps, die Sie vielleicht noch nicht über eine Notwendigkeit, pull-in-Daten für Ihre app. Es wird wahrscheinlich eine Zeit kommen, wenn Sie brauchen, um dies zu tun, wie Reagieren die apps sind gut geeignet für Situationen, in denen Sie Umgang mit Daten und Zustand.

Der erste Satz von Daten, die Sie behandeln müssen möglicherweise könnte werden hart-codiert in Ihre Anwendung Reagieren, wie wir es für diese demo aus unserem Fehler-Grenze tutorial:

Finden Sie den Stift Fehler-Grenze 0 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Was ist, wenn Sie behandeln möchten Daten aus einer API? Das ist der Zweck dieser übung. Konkret, wir werden machen verwenden von Fetch API und axios als Beispiele für, wie die Anforderung und Verwendung von Daten.

Die Fetch API

Die Fetch-API bietet eine Schnittstelle für das abrufen von Ressourcen. Wir werden es verwenden, um abrufen von Daten aus einer Drittanbieter-API und sehen, wie es beim abrufen von Daten von einer API gebaut.

Mit Fetch mit einem Drittanbieter-API

Finden Sie den Stift Reagieren Fetch API Stift 1 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Wir Holen zufälligen Benutzer aus JSONPlaceholder, eine gefälschte online-REST-API für die Prüfung. Beginnen wir mit der Erstellung unserer Komponente und erklärt einige default-Zustand.

Klasse App erweitert Reagieren.Komponente {
state = {
isLoading: true,
Benutzer: [],
Fehler: null
}

render() {
<Reagieren.Fragment>
</Reagieren.Fragment>
}
}

Es ist verpflichtet, eine Verzögerung, wenn Daten angefordert werden die durch das Netzwerk. Es könnte ein paar Sekunden oder vielleicht ein paar Millisekunden. So oder so, während dieser Verzögerung, es ist eine gute Praxis, lassen Sie die Benutzer wissen, dass etwas geschieht, während die Anfrage verarbeitet wird.

Zu tun, die wir nutzen isLoading, um entweder die be-Nachricht) oder die angeforderten Daten. Die Daten werden angezeigt, wenn isLoading falsch ist, sonst eine be-Nachricht wird auf dem Bildschirm angezeigt werden. Also der render () – Methode sieht wie folgt aus:

render() {
const { isLoading, Benutzer, Fehler } =.Zustand;
return (
<Reagieren.Fragment>
<h1>Random User</h1>
// Eine Meldung angezeigt, wenn wir auf einen Fehler stoßen
{Fehler ? <p>{error.message}</p> : null}
// Hier ist unsere Daten zu überprüfen
{!isLoading ? (
Benutzer.anzeigen(user => {
const { username, name, E-Mail } = Benutzer;
return (
<div key={Benutzername}>
<p>Name: {name}</p>
<p>E-Mail-Adresse: {email}</p>
<hr />
</div>
);
})
// Wenn es eine Verzögerung bei der Daten, lassen wir den Benutzer wissen, dass es be –
) : (
<h3>Loading…</h3>
)}
</Reagieren.Fragment>
);
}

Der code ist im Grunde, dies zu tun:

  1. De-Strukturen isLoading, – Benutzer und-Fehler von der Anwendung, damit wir nicht zu halten eingeben.Zustand.
  2. Druckt eine Meldung, wenn die Anwendung auf einen Fehler, der Aufbau einer Verbindung
  3. Überprüft, ob die Daten laden
  4. Wenn das nicht geschieht, dann müssen wir die Daten haben, also zeigen wir es
  5. Wenn das geschieht, dann müssen wir noch daran arbeiten und die Anzeige “Laden…”, während die app arbeitet

Für die Schritte 3-5, um zu arbeiten, wir brauchen, um die Anforderung zum Holen von Daten aus einer API. Dies ist, wo die JSONplaceholder API wird kommen in praktisch für unser Beispiel.

fetchUsers() {
// Wo wir sind, abrufen von Daten von
fetch(`https://jsonplaceholder.typicode.com/users`)
// Erhalten wir die API-Antwort und empfangen von Daten im JSON-format…
.(Antwort => Antwort.json())
// …dann wir aktualisieren die Benutzer Zustand
.dann(Daten =>
diese.setState({
Benutzer: Daten,
isLoading: false,
})
)
// Abfangen von Fehlern, die wir schlagen und aktualisieren der app
.catch(error=>.setState({ error, isLoading: false }));
}

Wir erstellen eine Methode mit dem Namen fetchUser() und verwenden Sie es, genau das zu tun, was Sie vielleicht denken: fordern Sie Benutzer-Daten aus der API-Endpunkt und Holen für unsere app. Fetch ist ein Versprechen-basierte API, die gibt ein response-Objekt. Also, wir nutzen das json () – Methode des response-Objekt gespeichert, in Daten und aktualisieren, die den Zustand der Benutzer in der Anwendung. Wir müssen Sie auch ändern Sie den Status von isLoading auf false, so dass unsere Anwendung weiß, dass das laden abgeschlossen ist und alles ist klar zum Rendern der Daten.

Die Tatsache, dass Fetch Versprechen-basierend heißt, wir fangen auch Fehler .catch () – Methode. Jeder Fehler aufgetreten ist, einen Wert zum aktualisieren des Fehler-Zustands. Praktisch!

Das erste mal die Anwendung stellt die Daten nicht erhalten wurden — kann es Sekunden dauern. Wir möchten trigger die Methode zum abrufen der Benutzer, wenn der Zustand der Anwendung zugegriffen werden kann, für ein update und die Anwendung neu gerendert. Reagieren die componentDidMount() ist der beste Platz für diese, also wir platzieren den fetchUsers () – Methode.

componentDidMount() {
diese.fetchUsers();
}
Mit Fetch Mit Selbst-eigene API

So weit, wir haben uns angeschaut, wie jemand anderes die Daten in einer Anwendung zu verwenden. Aber was ist, wenn wir arbeiten mit unseren eigenen Daten in unsere eigene API? Das ist, was wir decken jetzt.

Finden Sie den Stift Reagieren Fetch API-Stift 2 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Ich baute mir ein API ist verfügbar auf GitHub. Die JSON-Antwort, die Sie erhalten hat, auf AWS — das ist, was wir verwenden für dieses tutorial.

Wie zuvor erstellen wir unser Bauteil-und einige Standard-Zustand.

Klasse App erweitert Reagieren.Komponente {
state = {
isLoading: true,
Beiträge: [],
Fehler: null
}

render() {
<Reagieren.Fragment>
</Reagieren.Fragment>
}
}

Unsere Methode für die Schleife durch die Daten wird anders sein als die, die wir vorher benutzt, aber nur, weil der Daten-Struktur, die gehen, anders zu sein. Sehen Sie den Unterschied zwischen unseren Daten-Struktur hier und die, die wir erhalten aus JSONPlaceholder.

Hier ist, wie die render () – Methode Aussehen wird für unsere API:

render() {
const { isLoading, Beiträge, Fehler } =.Zustand;
return (
<Reagieren.Fragment>
<h1>Reagieren Fetch – Blog</h1>
<hr />
{!isLoading ? Objekt.Schlüssel(Beiträge).map(key => <Post key={key} body={Beiträge[key]} />) : <h3>Loading…</h3>}
</Reagieren.Fragment>
);
}

Lassen Sie uns brechen die Logik

{
!isLoading ?
Objekt.Schlüssel(Beiträge).map(key => <Post key={key} body={Beiträge[key]} />)
: <h3>Loading…</h3>
}

Wenn isLoading ist nicht wahr, wir geben ein array zurück, Karte durch, und übergeben Sie die Informationen auf der Post-Komponente, die als Requisiten. Ansonsten zeigen wir eine “Loading…” – Meldung, während das Programm bei der Arbeit. Sehr ähnlich wie zuvor.

Die Methode fetch-posts Aussehen wird wie im ersten Teil verwendet.

fetchPosts() {
// Die API, wo wir sind, abrufen von Daten von
fetch(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`)
// Wir eine Antwort erhalten, und empfangen der Daten im JSON-format…
.(Antwort => Antwort.json())
// …dann wir aktualisieren den Status unserer Anwendung
.dann(
Daten =>
diese.setState({
Beiträge: Daten,
isLoading: false,
})
)
// Wenn wir die Fehler abfangen statt einer Antwort, machen wir ein update der app
.catch(error=>.setState({ error, isLoading: false }));
}

Jetzt können wir nennen die fetchPosts Methode in ein componentDidMount () – Methode

componentDidMount() {
diese.fetchPosts();
}

In der Post-Komponente, die wir-Karte durch die Requisiten, die wir erhalten und machen die Titel und die Inhalte für jeden post:

const Post = ({ Körper }) => {
return (
<div>
{Körper.Karte(post => {
const { _id, title, content } = post;
return (
<div key={_id}>
<h2>{title}</h2>
<p>{Inhalt}</p>
<hr />
</div>
);
})}
</div>
);
};

Da haben wir es! Jetzt wissen wir, wie verwenden die Fetch API request-Daten aus verschiedenen Quellen und legen Sie es in einer Anwendung zu verwenden. High fives. ✋

axios

OK, also verbrachten wir eine gute Menge der Zeit, sich auf den Fetch API und jetzt gehen wir, um unsere Aufmerksamkeit zu axios.

Wie die Fetch API, axios, ist eine Möglichkeit, die wir machen können eine Anforderung für die Daten in unserer Anwendung. Wo axios scheint ist, wie es ermöglicht Ihnen das senden einer asynchronen request zu REST-Endpunkte. Dies ist nützlich beim arbeiten mit der REST-API in ein Projekt Reagieren, sagen, dass eine kopflose WordPress CMS.

Es gibt laufende Debatte darüber, ob die Fetch ist besser als axios und Umgekehrt. Wir gehen nicht zu Tauchen Sie ein in, hier, da, nun, Sie können wählen Sie das richtige Werkzeug für den richtigen job. Wenn Sie neugierig auf die Punkte von jeder Seite, kann man hier und hier Lesen.

Über axios mit einem Drittanbieter-API

Finden Sie den Stift Reagieren Axios 1 Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Wie wir es mit dem Fetch API, beginnen wir mit dem anfordern von Daten aus einer API. Für diese ein, wir Holen uns den zufälligen Benutzer aus der Zufällige Benutzer-API.

Zuerst erstellen wir die App-Komponente, wie wir das getan hast, jedes mal vor:

Klasse App erweitert Reagieren.Komponente {
state = {
Benutzer: [],
isLoading: true,
Fehler: null
};

render() {
return (
<Reagieren.Fragment>
</Reagieren.Fragment>
);
}
}

Die Idee ist immer noch die gleiche: überprüfen Sie, ob das laden ist in der Prozess-und entweder machen die Daten, die wir erhalten zurück oder lassen Sie die Benutzer wissen, die Dinge werden noch geladen.

Um die Anfrage an die API, die wir brauchen, um eine Funktion zu erstellen. Wir nennen die Funktion getUsers(). Im inneren, stellen wir die Anfrage an die API-Verwendung von axios. Mal sehen, wie das aussieht, bevor zu erklären, weiter.

getUsers() {
// Wir verwenden axios anstelle von Fetch
axios
// Die API-wir sind Abfragen von Daten aus
.get(“https://randomuser.me/api/?results=5”)
// Sobald wir eine Antwort erhalten, werden wir anzeigen der API-Endpunkte für unsere Requisiten
.(Antwort =>
Antwort.Daten.Ergebnisse.anzeigen(user => ({
name: `${user.name.erste} ${user.name.letzten}`,
Benutzername: `${user.login.username}`,
E-Mail: `${user.E}`,
Bild: `${user.Bild.thumbnail}`
}))
)
// Let ‘ s stellen Sie sicher, dass der laden Stand, um die Daten anzuzeigen
.dann(Benutzer => {
diese.setState({
Nutzer,
isLoading: false
});
})
// Wir können immer noch die `.catch ()` – Methode, da axios ist Versprechen-basiert
.catch(error=>.setState({ error, isLoading: false }));
}

Ganz anders als die Fetch-Beispiele, richtig? Die Grundstruktur ist eigentlich ziemlich ähnlich, aber jetzt sind wir in der business-mapping-Daten zwischen Endpunkten.

Die GET-Anfrage übergeben wird, aus der API-URL als parameter. Die Antwort erhalten wir von der API, das ein Objekt enthält Daten aufgerufen und enthält weitere Objekte. Die Informationen, die wir wollen, steht in den Daten.Ergebnisse, die ein array von Objekten, die die Daten der einzelnen Benutzer.

Hier gehen wir wieder mit dem Aufruf unserer Methode innerhalb der componentDidMount () – Methode:

componentDidMount() {
diese.getUsers();
}

Alternativ können Sie dies anstelle und im Grunde kombinieren Sie diese ersten beiden Schritte:

componentDidMount() {
axios
.get(“https://randomuser.me/api/?results=5”)
.(Antwort =>
Antwort.Daten.Ergebnisse.anzeigen(user => ({
name: `${user.name.erste} ${user.name.letzten}`,
Benutzername: `${user.login.username}`,
E-Mail: `${user.E}`,
Bild: `${user.Bild.thumbnail}`
}))
)
.dann(Benutzer => {
diese.setState({
Nutzer,
isLoading: false
});
})
.catch(error=>.setState({ error, isLoading: false }));
}

Wenn Sie die Codierung lokal von Ihrem Computer, können Sie vorübergehend Bearbeiten Sie die getUsers () – Funktion wie folgt Aussehen:

getUsers() {
axios
.get(“https://randomuser.me/api/?results=5”)
.(Antwort => Konsole.log(response))
.catch(error=>.setState({ error, isLoading: false }));
}

Ihre Konsole sollte etwas ähnlich wie diese:

Wir-Karte durch die array-Ergebnisse zu erhalten, die Informationen, die wir brauchen für jeden Benutzer. Das array der Benutzer wird dann verwendet, um einen neuen Wert für unsere Benutzer Zustand. Damit fertig, wir können dann ändern Sie den Wert von isLoading.

Standardmäßig isLoading auf true gesetzt ist. Wenn der Staat von Benutzern aktualisiert wird, wollen wir ändern den Wert von isLoading auf false, da diese ist das Stichwort, unsere app sucht, um den Schalter von “Loading…” auf die gerenderte Daten.

render() {
const { isLoading, users} =.Zustand;
return (
<Reagieren.Fragment>
<h2>Zufälliges</h2>
<div>
{!isLoading ? (
Benutzer.anzeigen(user => {
const { username, name, E-Mail, Bild } = Benutzer;
return (
<div key={Benutzername}>
<p>{name}</p>
<div>
<img src= ” {image} alt={name} />
</div>
<p>{email}</p>
<hr />
</div>
);
})
) : (
<p>Loading…</p>
)}
</div>
</Reagieren.Fragment>
);
}

Wenn Sie sich die Benutzer Zustand zu der Konsole, werden Sie sehen, dass es ist ein array von Objekten:

Das leere array-zeigt den Wert vor den Daten gewonnen werden. Die zurückgegebenen Daten enthält nur die Namen, Benutzernamen, E-Mail-Adresse und Bild von einzelnen Benutzern, denn Sie sind die Endpunkte, die wir ausgearbeitet haben. Es gibt eine Menge mehr Daten aus der API, natürlich, aber wir würden hinzufügen müssen, um diese dann unseren getUsers-Methode.

Über axios mit Ihren eigenen API

Finden Sie den Stift Reagieren Axios 2 Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Sie haben gesehen, wie axios mit einem Drittanbieter-API, aber wir können uns anschauen, wie es ist, zum anfordern von Daten aus unserer eigenen API, genau wie wir es mit dem Fetch API. In der Tat, verwenden wir dasselbe JSON-Datei, die wir Holen, damit wir sehen können, den Unterschied zwischen den beiden Ansätzen.

Hier ist alles zusammengestellt:

Klasse App erweitert Reagieren.Komponente {
// Zustand gelten für die Beiträge-Objekt, das gesetzt wird, um das laden von default
state = {
Beiträge: [],
isLoading: true,
Fehler: null
};
// Jetzt sind wir gehen, um eine Anforderung für Daten mithilfe von axios
getPosts() {
axios
// Dies ist, wo die Daten gehostet wird,
.get(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”)
// Sobald wir eine Antwort erhalten und speichern von Daten, ändern wir den laden Zustand
.dann(response => {
diese.setState({
Beiträge: Antwort.Daten.Beiträge,
isLoading: false
});
})
// Wenn wir alle Fehler abzufangen, die Verbindung, lassen Sie uns entsprechend aktualisieren
.catch(error=>.setState({ error, isLoading: false }));
}
// Let ‘ s unsere app weiß, wir sind bereit zum Rendern der Daten
componentDidMount() {
diese.getPosts();
}
// Setzen, diese Daten zu verwenden
render() {
const { isLoading-posts } =.Zustand;
return (
<Reagieren.Fragment>
<h2>Random Post</h2>
<div>
{!isLoading ? (
Beiträge.Karte(post => {
const { _id, title, content } = post;
return (
<div key={_id}>
<h2>{title}</h2>
<p>{Inhalt}</p>
<hr />
</div>
);
})
) : (
<p>Loading…</p>
)}
</div>
</Reagieren.Fragment>
);
}
}

Der Hauptunterschied zwischen dieser Methode und mit axios zu Holen, von einem Dritten ist, wie die Daten formatiert werden. Wir bekommen gerade JSON diese Weise eher als Zuordnung von Endpunkten.

Die Beiträge Daten erhalten wir von der API verwendet wird, um den Wert zu aktualisieren der Komponente posts Zustand. Mit diesem können wir die Karte durch die fülle der Beiträge in der render(). Wir erhalten dann die id, den Titel und Inhalt der einzelnen Beiträge mit ES6 de-Strukturierung, die dann für den Benutzer wiedergegeben.

So wie wir es Taten, bevor, was angezeigt wird, hängt vom Wert des isLoading. Wenn wir uns einen neuen Staat für Beiträge, die mit den Daten aus der API, die wir hatten, um einen neuen Staat für isLoading, zu. Dann können wir endlich lassen Sie die Benutzer wissen, Daten laden oder Rendern der Daten, die wir erhalten haben.

async und await

Eine andere Sache, die Versprechen-basierend nate von axios ermöglicht es uns zu tun ist, nehmen Sie Vorteil ist async und await . Mit dieser, die getPosts () – Funktion wird wie folgt Aussehen.

async getPosts() {
const response = await axios.get(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”);
try {
diese.setState({
Beiträge: Antwort.Daten.Beiträge,
isLoading: false
});
} catch (error) {
diese.setState({ error, isLoading: false });
}
}
Base Instanz

Mit axios, ist es möglich, erstellen Sie eine Basis-Instanz, wo wir fallen in die URL für unsere API so:

const api = axios.create({
baseURL: “https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”
});

…dann verwenden Sie es wie folgt:

async getPosts() {
const response = await-api.get();
try {
diese.setState({
Beiträge: Antwort.Daten.Beiträge,
isLoading: false
});
} catch (error) {
diese.setState({ error, isLoading: false });
}
}

Einfach eine schöne Art der Abstraktion, die API-URL.

Nun, die Daten, all die Dinge!

Wie bauen Sie Reagieren Anwendungen führen Sie in viele Szenarien, in denen Sie behandeln möchten Daten aus einer API. Ich hoffe, Sie wissen, fühlen, bewaffnet und bereit zu Rollen mit Daten aus einer Vielzahl von Quellen mit Optionen, wie, es zu verlangen.

Spielen wollen, mit mehr Daten? Sarah schrieb vor kurzem die Schritte zum erstellen Ihre eigenen serverlose API aus einer Liste von öffentlichen APIs.