Met behulp van de gegevens in het Reageren met het Ophalen van de API en axios

0
40

Als u nieuw bent om te Reageren, en misschien hebben alleen gespeeld met de bouw te doen en tegen de apps, die je misschien nog niet over een behoefte om gegevens binnen te halen voor uw app. Er zal waarschijnlijk een tijd komen dat je nodig hebt om dit te doen, Reageren apps zijn het meest geschikt voor situaties waarin u de opvolging van de gegevens en staat.

De eerste set van gegevens die u mogelijk moet handvat kan worden hardcoded in uw Reageren toepassing, zoals we dat deden voor deze demo van onze Fout Grens tutorial:

Zie de Pen fout grens 0 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Wat als je wilt omgaan met data uit een API? Dat is het doel van deze tutorial. Specifiek, zullen we gebruik maken van het Halen van de API en axios als voorbeelden voor het aanvragen en gebruiken van gegevens.

De Fetch-API

De Fetch-API biedt een interface voor het ophalen van middelen. We zullen gebruiken om gegevens op te halen uit een externe API en zie hoe deze te gebruiken bij het ophalen van gegevens uit een API gebouwd in huis.

Met behulp van Halen met een externe API

Zie de Pen Reageren Halen API Pen 1 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

We zullen het ophalen van willekeurige gebruikers van JSONPlaceholder, een valse online REST API voor het testen. Laten we beginnen met het maken van onze component en het declareren van de standaard staat.

klasse App breidt Reageren.Onderdeel {
staat = {
isLoading: true,
gebruikers: [],
fout: null
}

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

Er is gebonden aan een vertraging wanneer er gegevens worden gevraagd door het netwerk. Het kan een paar seconden of misschien een paar milliseconden. Één van beide manier, tijdens deze vertraging, het is een goede gewoonte om de gebruikers te laten weten dat er iets gaande is terwijl de aanvraag wordt verwerkt.

Om dat te doen zullen we gebruik maken van isLoading te tonen het laden bericht of de gevraagde gegevens. De gegevens worden weergegeven wanneer isLoading false is, anders een bericht bij laden zal worden weergegeven op het scherm. Dus de render () – methode zal er als volgt uitzien:

render() {
const { isLoading, gebruikers, fout } = dit.staat;
return (
<Reageren.Fragment>
<h1>Willekeurige Gebruiker</h1>
// Weergave van een bericht als we een fout optreden
{fout ? <p>{fout.bericht}</p> : null}
// Hier vindt u onze gegevens controleren
{!isLoading ? (
gebruikers.kaart(user => {
const { gebruikersnaam, naam, e-mail } = gebruiker;
return (
<div key={username}>
<p>Naam: {naam}</p>
<p>E-Mailadres: {e-mail}</p>
<hr />
</div>
);
})
// Als er een vertraging in de data, laten we de gebruiker laten weten het laden
) : (
<h3>Laden…</h3>
)}
</Reageren.Fragment>
);
}

De code is eigenlijk om dit te doen:

  1. De structuren isLoading, de gebruikers en de fout van de applicatie staat, zodat we niet hoeven te houden aan het typen.staat.
  2. Hiermee wordt een bericht weergegeven als de toepassing een fout optreedt in de oprichting van een verbinding
  3. Controleert om te zien als de gegevens laden
  4. Als het laden niet gebeurt, dan moeten we de gegevens, zodat wij weer te geven
  5. Als het laden is gebeurt, dan moeten we nog aan werken en “Laden…”, terwijl de app werkt

Voor de Stappen 3-5 om te werken, moeten we de verzoeken om gegevens op te halen van een API. Dit is waar de JSONplaceholder API zal van pas komen voor ons voorbeeld.

fetchUsers() {
// Waar we je ophalen van gegevens uit
ophalen(`https://jsonplaceholder.typicode.com/users`)
// We krijgen de API reactie en ontvangen van data in JSON formaat…
.vervolgens(respons => reactie.json())
// …dan hebben we een update van de gebruikers staat
.vervolgens(gegevens =>
deze.setState({
gebruikers: gegevens,
isLoading: false,
})
)
// Vangen eventuele fouten we hit en een update van de app
.catch(fout => dit.setState({ fout, isLoading: false }));
}

We maken een methode genaamd fetchUser() en gebruik deze om precies te doen wat je zou denken: een verzoek om gegevens van de gebruiker van de API-eindpunt te halen voor onze app. Fetch is een belofte-gebaseerde API die als resultaat een reactie object. Dus, we maken gebruik van de json() methode om de response-object die is opgeslagen in de gegevens, en gebruikt voor het bijwerken van de stand van gebruikers in onze applicatie. We moeten ook het wijzigen van de status van isLoading false, zodat onze applicatie weet dat het laden is voltooid en alles is duidelijk op te maken van de gegevens.

Het feit dat Fetch is een belofte-based houdt in dat we ook de vangst van fouten met behulp van de .catch() methode. Elke fout die wordt gebruikt om een waarde te updaten onze fout staat. Handig!

De eerste keer dat de toepassing wordt, worden de gegevens niet zijn ontvangen — het kan in enkele seconden. We willen voor het activeren van de methode voor het ophalen van de gebruikers bij de toepassing van state zijn toegankelijk voor een update en de toepassing opnieuw gerenderd. Reageren is componentDidMount() is de beste plaats voor deze, zodat we de fetchUsers() methode.

componentDidMount() {
deze.fetchUsers();
}
Met behulp van Halen Met Zelf-Eigendom API

Tot nu toe hebben we gekeken naar hoe iemand anders de gegevens te gebruiken in een toepassing. Maar wat als we werken met onze eigen data in onze eigen API? Dat is wat we gaan ter dekking van nu.

Zie de Pen Reageren Halen API Pen 2 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Ik bouwde een API is beschikbaar op GitHub. De JSON-antwoord dat je krijgt is geplaatst op AWS — dat is wat we zullen gebruiken voor deze tutorial.

Zoals we eerder deed, en laten we onze component en een aantal standaard staat.

klasse App breidt Reageren.Onderdeel {
staat = {
isLoading: true,
berichten: [],
fout: null
}

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

Onze methode voor het doorlopen van de gegevens zal worden anders dan we eerder gebruikt maar alleen omdat de gegevens van de structuur, die zal anders zijn. Je kan het verschil zien tussen onze data structuur hier en degene die we verkregen uit JSONPlaceholder.

Hier is hoe de render () – methode eruit zal zien voor onze API:

render() {
const { isLoading, berichten, fout } = dit.staat;
return (
<Reageren.Fragment>
<h1>Reageren op Fetch – Blog</h1>
<hr />
{!isLoading ? – Object.toetsen(berichten).kaart(key => <Post key={key} body={berichten[toets]} />) : <h3>Laden…</h3>}
</Reageren.Fragment>
);
}

Laten we breken de logica

{
!isLoading ?
– Object.toetsen(berichten).kaart(key => <Post key={key} body={berichten[toets]} />)
: <h3>Laden…</h3>
}

Wanneer isLoading is niet waar, we retourneert een array, kaart en de informatie doorgeven aan de Post-component als rekwisieten. Anders hebben we weer een “Loading…” weergegeven terwijl de toepassing is op het werk. Zeer vergelijkbaar met voorheen.

De methode om het op te halen berichten uit komt te zien als die in het eerste deel.

fetchPosts() {
// De API, waar we je ophalen van gegevens uit
ophalen(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`)
// We krijgen een antwoord en ontvangen van de data in JSON formaat…
.vervolgens(respons => reactie.json())
// …dan hebben we een update van de toestand van onze applicatie
.vervolgens(
gegevens =>
deze.setState({
berichten: gegevens,
isLoading: false,
})
)
// Als we de vangst van fouten in plaats van een reactie, laat de update van de app
.catch(fout => dit.setState({ fout, isLoading: false }));
}

Nu kunnen we noemen de fetchPosts methode in een componentDidMount() methode

componentDidMount() {
deze.fetchPosts();
}

In de Post-component, brengen we in kaart door middel van de props we ontvangen en geven de titel en de inhoud van elk bericht:

const Post = ({ body }) => {
return (
<div>
{lichaam.kaart(post => {
const { _id, de titel, de inhoud } = post;
return (
<div key={_id}>
<h2>{titel}</h2>
<p>{content}</p>
<hr />
</div>
);
})}
</div>
);
};

Daar hebben we het! Nu weten we hoe het gebruik van de Fetch-API om gegevens uit verschillende bronnen en zet het tot gebruik in een toepassing. High fives. ✋

axios

OK, dus we hebben een goede hoeveelheid tijd te kijken naar het Halen van de API en nu gaan we onze aandacht richten op axios.

Zoals het Ophalen API, axios is een manier waarop we kunnen een verzoek indienen om de gegevens te gebruiken in onze applicatie. Waar axios schijnt is hoe het staat u voor het verzenden van een asynchroon verzoek tot RUST eindpunten. Dit is handig wanneer u werkt met de REST API in een Reageren project, zegt een onthoofde WordPress CMS.

Er is voortdurend discussie over de vraag of Ophalen is beter dan axios en vice versa. We zijn niet van plan om te duiken in dat hier omdat, goed, je kunt kiezen van de juiste tool voor de juiste job. Als u nieuwsgierig bent naar de punten van elke kant, lees je hier en hier.

Met behulp van axios met een externe API

Zie de Pen Reageren Axios 1 Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Zoals we dat deden met de Fetch-API, laten we beginnen met het opvragen van gegevens van een API. Voor deze ene, we halen willekeurige gebruikers van de Random-Gebruiker API.

Eerst maken we de App onderdeel, zoals we gedaan hebben, elke keer voor:

klasse App breidt Reageren.Onderdeel {
staat = {
gebruikers: [],
isLoading: true,
fouten: null
};

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

Het idee is nog steeds hetzelfde: controleer of het laden is in het proces en maken de gegevens krijgen we terug of laat de gebruiker weten dat er dingen zijn nog aan het laden.

Om het verzoek te doen om de API, moeten we een functie maken. We noemen de functie getUsers(). In het, wij maken het verzoek om de API met behulp van axios. Laten we eens kijken hoe dat eruit ziet voor de uitleg verder.

getUsers() {
// We maken gebruik van axios in plaats van Halen
axios
// De API wij zijn gegevens opvragen van
.get(“https://randomuser.me/api/?results=5”)
// Zodra wij een antwoord te krijgen, zullen we de kaart van de API om eindpunten van onze rekwisieten
.vervolgens(respons =>
reactie.de gegevens.de resultaten.kaart(user => ({
naam: `${gebruiker.de naam.eerste} ${gebruiker.de naam.laatste}`,
gebruikersnaam: `${gebruiker.login.gebruikersnaam}`,
e-mail: `${gebruiker.e-mail}`,
afbeelding: `${gebruiker.de foto.miniatuur}`
}))
)
// Let ‘ s zorg ervoor dat het laden status te weergeven van de gegevens
.vervolgens(gebruikers => {
deze.setState({
gebruikers,
isLoading: false
});
})
// We kunnen nog steeds gebruik maken van de `.catch()` methode, omdat axios is een belofte op basis van
.catch(fout => dit.setState({ fout, isLoading: false }));
}

Heel anders dan het Ophalen voorbeelden, recht? De basisstructuur is eigenlijk vrij gelijkaardig, maar nu zitten we in de business van het in kaart brengen van gegevens tussen de eindpunten.

De GET-verzoek wordt doorgegeven van de API-URL als parameter. De respons die we krijgen van de API bevat een object met de naam data en die bevat andere objecten. De informatie die wij willen is beschikbaar in de gegevens.de resultaten, die bestaat uit een array van objecten met de gegevens van individuele gebruikers.

Hier gaan we weer met het bellen van onze methode aan de binnenkant van de componentDidMount() methode:

componentDidMount() {
deze.getUsers();
}

U kunt dit doen in plaats en in principe combineren van deze eerste twee stappen:

componentDidMount() {
axios
.get(“https://randomuser.me/api/?results=5”)
.vervolgens(respons =>
reactie.de gegevens.de resultaten.kaart(user => ({
naam: `${gebruiker.de naam.eerste} ${gebruiker.de naam.laatste}`,
gebruikersnaam: `${gebruiker.login.gebruikersnaam}`,
e-mail: `${gebruiker.e-mail}`,
afbeelding: `${gebruiker.de foto.miniatuur}`
}))
)
.vervolgens(gebruikers => {
deze.setState({
gebruikers,
isLoading: false
});
})
.catch(fout => dit.setState({ fout, isLoading: false }));
}

Als u het coderen van lokaal vanaf uw computer, kunt u tijdelijk het bewerken van de getUsers() functie om te kijken als dit:

getUsers() {
axios
.get(“https://randomuser.me/api/?results=5”)
.vervolgens(respons => console.log(response))
.catch(fout => dit.setState({ fout, isLoading: false }));
}

De console krijg je iets als dit:

Brengen We in kaart door middel van de resultaten array om de informatie te verkrijgen die we nodig hebben voor elke gebruiker. De matrix van de gebruikers wordt vervolgens gebruikt om een nieuwe waarde voor onze gebruikers staat. Met dat gedaan, dan kunnen we de waarde van isLoading.

Standaard isLoading is ingesteld op true. Wanneer de staat van de gebruikers wordt bijgewerkt, we willen de waarde van isLoading om vals, omdat dit is de cue onze app zoekt om de overstap te maken van “Laden…” weergegeven gegevens.

render() {
const { isLoading, gebruikers } = dit.staat;
return (
<Reageren.Fragment>
<h2>Willekeurige Gebruiker</h2>
<div>
{!isLoading ? (
gebruikers.kaart(user => {
const { gebruikersnaam, naam, e-mail, afbeelding } = gebruiker;
return (
<div key={username}>
<p>{name}</p>
<div>
<img src={afbeelding} alt={naam} />
</div>
<p>{e-mail}</p>
<hr />
</div>
);
})
) : (
<p>Laden…</p>
)}
</div>
</Reageren.Fragment>
);
}

Als u zich aanmeldt voor de gebruikers van de staat om de console, je zult zien dat het een array van objecten:

De lege array laat de waarde voor de gegevens werden verkregen. De geretourneerde gegevens bevat alleen de naam, gebruikersnaam, e-mailadres en het imago van individuele gebruikers, want die zijn de eindpunten we in kaart gebracht. Er is veel meer gegevens beschikbaar zijn van de API, natuurlijk, maar we zouden hebben om die toe te voegen aan onze getUsers methode.

Met behulp van axios met uw eigen API

Zie de Pen Reageren Axios 2 Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Je hebt gezien hoe het gebruik van axios met een externe API, maar we kunnen kijken naar hoe het is om gegevens uit onze eigen API, net zoals we dat deden met de Fetch-API. In feite, laten we gebruik maken van dezelfde JSON-bestand dat u gebruikt voor het Ophalen zodat we kunnen zien of het verschil tussen de twee benaderingen.

Hier is alles samen:

klasse App breidt Reageren.Onderdeel {
// De staat van toepassing op de posten object die is ingesteld om het laden van de standaard
staat = {
berichten: [],
isLoading: true,
fouten: null
};
// Nu gaan we maken een verzoek om gegevens met behulp van axios
getPosts() {
axios
// Dit is waar de data wordt gehost
.get(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”)
// Als er een antwoord en gegevens op te slaan, veranderen we de laden van staat
.vervolgens(respons => {
deze.setState({
berichten: reactie.de gegevens.berichten
isLoading: false
});
})
// Als we vangen eventuele fouten aansluiten, laten we dienovereenkomstig bijwerken
.catch(fout => dit.setState({ fout, isLoading: false }));
}
// We onze app weet zijn we klaar om te zorgen dat de gegevens
componentDidMount() {
deze.getPosts();
}
// Om die gegevens te gebruiken
render() {
const { isLoading, berichten } = dit.staat;
return (
<Reageren.Fragment>
<h2>Willekeurige Post</h2>
<div>
{!isLoading ? (
posts.kaart(post => {
const { _id, de titel, de inhoud } = post;
return (
<div key={_id}>
<h2>{titel}</h2>
<p>{content}</p>
<hr />
</div>
);
})
) : (
<p>Laden…</p>
)}
</div>
</Reageren.Fragment>
);
}
}

Het belangrijkste verschil tussen deze methode en het gebruik van axios op te halen van een derde partij is hoe de gegevens zijn geformatteerd. We krijgen straight-up JSON deze manier in plaats van mapping eindpunten.

De berichten gegevens die we krijgen van de API wordt gebruikt voor het bijwerken van de waarde van het onderdeel berichten staat. Met deze, kunnen we de kaart door de array van berichten in de render(). Vervolgens hebben We voor de id, titel en inhoud van elk bericht met behulp van de ES6-structurering, die vervolgens wordt weergegeven aan de gebruiker.

Zoals we eerder deed, wat wordt weergegeven is afhankelijk van de waarde van isLoading. Als we een nieuwe staat voor berichten met behulp van de gegevens verkregen van de API, we moesten een nieuwe staat voor isLoading ook. Dan kunnen we eindelijk de gebruiker laten weten gegevens laden of maken de gegevens die we hebben ontvangen.

async en wachten

Een ander ding is de belofte op basis van nate van axios stelt ons in staat om te doen is gebruik te maken van async en wachten . Met behulp van deze, de getPosts() functie zal uitzien.

async getPosts() {
const antwoord = wachten axios.get(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”);
proberen {
deze.setState({
berichten: reactie.de gegevens.berichten
isLoading: false
});
} catch (error) {
deze.setState({ fout, isLoading: false });
}
}
Basis exemplaar

Met axios, is het mogelijk om een basis te creëren exemplaar waar we neerzetten in de URL van de API, zoals:

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

…dan gebruik maken van het als dit:

async getPosts() {
const antwoord = wachten api.get();
proberen {
deze.setState({
berichten: reactie.de gegevens.berichten
isLoading: false
});
} catch (error) {
deze.setState({ fout, isLoading: false });
}
}

Gewoon een leuke manier van abstractie van de API-URL.

De gegevens van alle dingen!

Als u het bouwen van Reageren toepassingen, zal je in veel scenario ‘ s waar u wilt verwerken gegevens van een API. Hopelijk weet u het gevoel bewapend en klaar om te rollen met de gegevens uit een verscheidenheid van bronnen, met opties voor het verzoek.

Wil je spelen met meer gegevens? Sarah schreef onlangs de stappen voor het maken van uw eigen server is niet vereist API van een lijst van openbare Api ‘ s.