Ved hjelp av data i Reagerer med Hente API og axios

0
12

Hvis du er ny til å Reagere, og kanskje har bare spilt med bygg å gjøre og mot programmer, kan du ikke ennå har kjørt over et behov for å trekke inn data for appen din. Det vil sannsynligvis komme en tid når du trenger å gjøre dette, som Reagerer apps er de fleste godt egnet for situasjoner der du er håndtering både data og staten.

Det første settet av data som du trenger for å håndtere kan være hardkodet inn i din Reagerer program, som vi gjorde for denne demoen fra våre Feil Grensen opplæringen:

Se Penn feil grensen 0 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Hva hvis du ønsker å håndtere data fra et API? Det er formålet med denne opplæringen. Spesielt vil vi gjøre bruk av Hente API og axios som eksempler for hvordan til å be om og bruke data.

Det Hente API

Det Hente API gir et grensesnitt for å hente ressurser. Vi vil bruke den til å hente data fra en tredje-part API og se hvordan du kan bruke det når du henter data fra en API bygget på huset.

Ved hjelp Hente med en tredje-part API

Se Penn Reagere Hente API Penn 1 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Vi vil være på å hente tilfeldige brukere fra JSONPlaceholder, en falsk online REST API for testing. La oss begynne med å lage vår komponent og å erklære noen standard tilstand.

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
isLoading: true,
brukere: [],
feil: null
}

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

Det er bundet til å være en forsinkelse når data blir forespurt av nettverket. Det kan være et par sekunder, eller kanskje et par millisekunder. Uansett, i løpet av denne forsinkelsen, det er god praksis å la brukerne få vite at noe skjer mens forespørsel er under behandling.

Å gjøre det vil vi gjøre bruk av isLoading å enten vise legge meldingen eller den forespurte data. Dataene som vises når isLoading er falske, annet en legger i meldingen vil bli vist på skjermen. Så render () – metoden vil se ut som dette:

render() {
const { isLoading, brukere, feil } = dette.staten;
retur (
<Reagere.Fragment>
<h1>Tilfeldig Bruker</h1>
// Vise en melding hvis det oppstår en feil
{feil ? <p>{feil.melding}</p> : null}
// Her er våre data sjekk
{!isLoading ? (
brukere.kart(user => {
const { brukernavn, navn, e } = user;
retur (
<div key={brukernavn}>
<p>Navn: {name}</p>
<p>E-post Adresse: {e}</p>
<hr />
</div>
);
})
// Hvis det er en forsinkelse i data, la oss la brukeren vet det er lasting
) : (
<h3>Laster…</h3>
)}
</Reagere.Fragment>
);
}

Koden er i utgangspunktet å gjøre dette på:

  1. De-strukturer isLoading, brukere og feilmeldinger fra programmet staten, slik at vi slipper å fortsette å skrive dette.staten.
  2. Skriver ut en melding hvis programmet oppdager en feil å opprette en tilkobling
  3. Sjekker for å se om data lasting
  4. Hvis du legger i papir er ikke skjer, så må vi ha data, så viser vi det
  5. Hvis du legger inn skjer, så vi må fortsatt jobbe med det og vise “laster inn…” mens app fungerer

For Trinn 3-5 skal fungere, trenger vi å gjøre avtale om å hente data fra en API. Dette er hvor JSONplaceholder API-et vil komme godt med for vårt eksempel.

fetchUsers() {
// Hvor vi henter data fra
hente(`https://jsonplaceholder.typicode.com/users`)
// Vi får API respons og motta data i JSON-format…
.deretter(svar => svar.json())
// …så vil vi oppdatere brukere staten
.deretter(data =>
dette.setState({
brukere: data,
isLoading: false,
})
)
// Fange opp eventuelle feil vi traff og oppdatere appen
.catch(feil => dette.setState({ feil, isLoading: false }));
}

Lager vi en metode som kalles fetchUser() og bruke det til å gjøre akkurat hva du tenker kanskje: forespørsel, user data fra API-et endepunkt og hente det for vår app. Fetch er et løfte-basert API som returnerer et svar objekt. Så, vi gjør bruk av json() metode for å få svar objekt som er lagret på data og som brukes til å oppdatere tilstand av brukere i vårt program. Vi trenger også å endre tilstand av isLoading til false, slik at programmet vet at lasting er avsluttet og alle er klare til å gjengi data.

Det faktum at Fetch er løfte-basert betyr at vi kan også ta feil å bruke .catch () – metoden. En feil oppstod brukes en verdi for å oppdatere våre feil er staten. Praktisk!

Første gang programmet gjengir data ikke har blitt mottatt — det kan ta noen sekunder. Vi ønsker å utløse metode for å hente brukere når programmet staten kan nås for en oppdatering og programmet re-modellert. Reagerer er componentDidMount() er det beste stedet for dette, så vi vil plassere fetchUsers () – metoden i det.

componentDidMount() {
dette.fetchUsers();
}
Ved hjelp Hente Med Selv-Eid API

Så langt har vi sett på hvordan å sette andres data til bruk i et program. Men hva hvis vi arbeider med våre egne data i våre egne API? Det er hva vi kommer til å dekke akkurat nå.

Se Penn Reagere Hente API-Pen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Jeg bygget et API som er tilgjengelig på GitHub. JSON svar du får, har blitt plassert på AWS — som er hva vi vil bruke for denne opplæringen.

Som vi gjorde før, la oss lage vår komponent og sette opp noen standard tilstand.

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
isLoading: true,
innlegg: [],
feil: null
}

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

Vår metode for looping gjennom data vil være forskjellig fra det vi brukte før, men bare på grunn av dataene er struktur, som kommer til å være forskjellige. Du kan se forskjellen mellom våre data struktur her, og vi har fått fra JSONPlaceholder.

Her er hvordan render () – metoden vil se ut for vår API:

render() {
const { isLoading, innlegg, feil } = dette.staten;
retur (
<Reagere.Fragment>
<h1>Reagere Hente – Blogg</h1>
<hr />
{!isLoading ? Objektet.tastene(innlegg).kart(key => <Post key={key} body={innlegg[nøkkel]} />) : <h3>Laster…</h3>}
</Reagere.Fragment>
);
}

La oss bryte ned logikk

{
!isLoading ?
Objektet.tastene(innlegg).kart(key => <Post key={key} body={innlegg[nøkkel]} />)
: <h3>Laster…</h3>
}

Når isLoading er ikke sant, vi returnerer en matrise, kart gjennom det, og sende informasjon til Post-komponenten som rekvisitter. Ellers viser vi en “laster inn…” melding mens programmet er i arbeid. Veldig likt som før.

Metoden for å hente inn innlegg vil se ut som den som brukes i den første delen.

fetchPosts() {
// API hvor vi henter data fra
hente(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`)
// Vi få et svar, og motta data i JSON-format…
.deretter(svar => svar.json())
// …så vil vi oppdatere tilstand av vår søknad
.deretter(
data =>
dette.setState({
innlegg: data,
isLoading: false,
})
)
// Hvis vi ta feil, i stedet for et svar, la oss oppdatere appen
.catch(feil => dette.setState({ feil, isLoading: false }));
}

Nå kan vi ringe fetchPosts metode inne i en componentDidMount () – metoden

componentDidMount() {
dette.fetchPosts();
}

I den Post-komponenten, vi kart gjennom de virkemidlene vi har mottatt og gi den tittel og innhold for hver post:

const Innlegg = ({ kroppen }) => {
retur (
<div>
{kroppen.kart(post => {
const { id, tittel, innhold } = post;
retur (
<div key={id}>
<h2>{tittel}</h2>
<p>{innhold}</p>
<hr />
</div>
);
})}
</div>
);
};

Der har vi det! Nå vet vi hvordan vi skal bruke Hente API for å be om data fra ulike kilder og sette den til å bruke i et program. High fives. ✋

axios

OK, så vi har brukt en god del tid på å se på de Hente API og nå skal vi vender vår oppmerksomhet til axios.

Liker Hente API, axios er en måte vi kan gjøre en anmodning om data til bruk i programmet vårt. Hvor axios skinner er hvordan det tillater deg å sende en asynkron forespørsel til RESTEN endepunkter. Dette kommer i hendig når du arbeider med RESTEN API i et Reagere prosjektet, sier en hodeløs WordPress CMS.

Det er pågående debatt om hvorvidt Hente er bedre enn axios og vice versa. Vi kommer ikke til å dykke inn i dette her, fordi, vel, du kan velge riktig verktøy til riktig jobb. Hvis du er nysgjerrig på poengene fra hver side, som du kan lese her og her.

Ved hjelp av axios med en tredje-part API

Se Penn Reagere Axios 1 Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Som vi gjorde med Hente API, la oss starte ved å be om data fra en API. For dette, vil vi hente tilfeldige brukere fra Tilfeldig Bruker API.

Først oppretter vi Appen komponent som vi har gjort det hver gang før:

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
brukere: [],
isLoading: true,
feil: null
};

render() {
retur (
<Reagere.Fragment>
</Reagere.Fragment>
);
}
}

Ideen er fortsatt den samme: sjekk for å se hvis du er i prosessen, og vil enten gi data vi komme tilbake eller la brukeren vite ting er fortsatt lasting.

For å gjøre en forespørsel til API, som vi trenger for å lage en funksjon. Vi kaller funksjonen getUsers(). Inne i det, vil vi gjøre forespørsel til API ved hjelp av axios. La oss se hvordan det ser ut, før vi går videre.

getUsers() {
// Vi bruker axios i stedet for å Hente
axios
// API-vi ber om data fra
.få(“https://randomuser.me/api/?results=5”)
// Når vi får svar, vi vil map API endepunktene til vår rekvisitter
.deretter(svar =>
svar.data.resultater.kart(user => ({
name: `${user.navnet.først} ${user.navnet.sist}`,
brukernavn: `${user.logg inn.brukernavn}`,
e-post: `${user.e-post}`,
bilde: `${user.bilde.thumbnail}`
}))
)
// La oss sørge for å endre legger staten til å vise data
.deretter(brukere => {
dette.setState({
brukere,
isLoading: false
});
})
// Vi kan fortsatt bruke `.catch()` metode siden axios er løfte-basert
.catch(feil => dette.setState({ feil, isLoading: false }));
}

Ganske forskjellig fra den Hente eksempler, ikke sant? Den grunnleggende strukturen er faktisk ganske lik, men nå er vi i bransjen for kartlegging av data mellom endepunktene.

GET forespørsel er gått fra API URL som en parameter. Responsen vi får fra API inneholder et objekt som heter data og som inneholder andre objekter. Informasjonen vi ønsker er tilgjengelig i data.resultatene, som er en samling av objekter som inneholder data for individuelle brukere.

Her går vi igjen med ringe vår metode innsiden av componentDidMount () – metoden:

componentDidMount() {
dette.getUsers();
}

Alternativt, kan du gjøre dette i stedet, og i utgangspunktet kombinere disse to første trinnene:

componentDidMount() {
axios
.få(“https://randomuser.me/api/?results=5”)
.deretter(svar =>
svar.data.resultater.kart(user => ({
name: `${user.navnet.først} ${user.navnet.sist}`,
brukernavn: `${user.logg inn.brukernavn}`,
e-post: `${user.e-post}`,
bilde: `${user.bilde.thumbnail}`
}))
)
.deretter(brukere => {
dette.setState({
brukere,
isLoading: false
});
})
.catch(feil => dette.setState({ feil, isLoading: false }));
}

Hvis du er koding lokalt fra din maskin, kan du midlertidig redigere getUsers () – funksjonen til å se ut som dette:

getUsers() {
axios
.få(“https://randomuser.me/api/?results=5”)
.deretter(svar => konsollen.logg(svar))
.catch(feil => dette.setState({ feil, isLoading: false }));
}

Konsollen skal få noe som ligner på dette:

Vi kart gjennom resultatene utvalg for å få den informasjonen vi trenger for hver bruker. Den utvalg av brukere er deretter brukt til å angi en ny verdi for våre brukere staten. Med det gjort, vi kan endre verdien av isLoading.

Som standard, isLoading er satt til true. Når staten brukere er oppdatert, vi ønsker å endre verdien av isLoading til false, siden dette er stikkordet vår app er ute etter å gjøre overgangen fra “laster inn…” for å gjengitt data.

render() {
const { isLoading, brukere } = dette.staten;
retur (
<Reagere.Fragment>
<h2>Tilfeldig Bruker</h2>
<div>
{!isLoading ? (
brukere.kart(user => {
const { brukernavn, navn, e-post, bilde } = user;
retur (
<div key={brukernavn}>
<p>{name}</p>
<div>
<img src={bilde} alt={name} />
</div>
<p>{e}</p>
<hr />
</div>
);
})
) : (
<p>Laster…</p>
)}
</div>
</Reagere.Fragment>
);
}

Hvis du logger brukere staten til konsollen, vil du se at det er en rekke objekter:

Den tom tabell viser verdien før data ble innhentet. De returnerte dataene bare inneholder navn, brukernavn, e-postadresse og et bilde av individuelle brukere fordi de er endepunkter vi kartlagt. Det er mye mer tilgjengelige data fra API, selvfølgelig, men vi er helt nødt til å legge disse til våre getUsers metode.

Ved hjelp av axios med din egen API

Se Penn Reagere Axios 2 Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Du har sett hvordan å bruke axios med en tredje-part API, men vi kan se på hva det er som å be om data fra vår egen API, akkurat som vi gjorde med Hente API. Faktisk, la oss bruke samme JSON-fil som vi brukte for å Hente slik at vi kan se forskjellen mellom de to tilnærmingene.

Her er alt satt sammen:

klasse App strekker seg til å Reagere.Komponent {
// Staten vil gjelde innlegg objekt som er satt til å legge i standard
tilstand = {
innlegg: [],
isLoading: true,
feil: null
};
// Nå skal vi gjøre en anmodning om data ved hjelp av axios
getPosts() {
axios
// Dette er hvor dataene er lagret
.få(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”)
// Når vi får svar og lagre data, la oss endre legger i staten
.deretter(svar => {
dette.setState({
innlegg: respons.data.innlegg,
isLoading: false
});
})
// Hvis vi fange opp eventuelle feil tilkobling, la oss en oppdatering
.catch(feil => dette.setState({ feil, isLoading: false }));
}
// La oss vår app vet at vi er klar til å gjengi data
componentDidMount() {
dette.getPosts();
}
// Legger til at data for bruk
render() {
const { isLoading, innlegg } = dette.staten;
retur (
<Reagere.Fragment>
<h2>Random Innlegg</h2>
<div>
{!isLoading ? (
innleggene.kart(post => {
const { id, tittel, innhold } = post;
retur (
<div key={id}>
<h2>{tittel}</h2>
<p>{innhold}</p>
<hr />
</div>
);
})
) : (
<p>Laster…</p>
)}
</div>
</Reagere.Fragment>
);
}
}

Den viktigste forskjellen mellom denne metoden og bruke axios å hente fra en tredjepart er hvordan dataene er formatert. Vi får rett-opp JSON denne måten heller enn kartlegging endepunkter.

Innlegg data vi får fra API-er som brukes til å oppdatere verdien av komponenten innlegg staten. Med dette, kan vi kart gjennom en rekke innlegg i render(). Vi så få id, tittel og innhold for hver post bruker ES6 de-strukturering, som deretter ytes til brukeren.

Som vi gjorde før, hva som vises avhenger av verdien av isLoading. Når vi setter en ny tilstand for innlegg ved hjelp av data innhentet fra API, vi måtte sette en ny tilstand for isLoading, også. Da kan vi endelig la brukeren vite data lasting eller gjøre dataene vi har mottatt.

asynkron og venter

En annen ting løftet-basert nate av axios gir oss mulighet til å gjøre er å dra nytte av er asynkron og venter . Ved hjelp av denne, getPosts () – funksjonen vil se sånn ut.

asynkron getPosts() {
const svar = venter axios.få(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”);
try {
dette.setState({
innlegg: respons.data.innlegg,
isLoading: false
});
} catch (feil) {
dette.setState({ feil, isLoading: false });
}
}
Base eksempel

Med axios, det er mulig å opprette en base for eksempel hvor vi slippe inn URL-adressen til vår API som så:

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

…da gjøre bruk av det som dette:

asynkron getPosts() {
const svar = venter api.get();
try {
dette.setState({
innlegg: respons.data.innlegg,
isLoading: false
});
} catch (feil) {
dette.setState({ feil, isLoading: false });
}
}

Rett og slett en fin måte å abstracting API URL.

Nå, data alle ting!

Som du bygger Reagere programmer, vil du kjøre inn massevis av scenarier hvor du ønsker å håndtere data fra et API. Forhåpentligvis vet du føle bevæpnet og klar til å rulle med data fra en rekke kilder, med alternativer for hvordan du ber om det.

Ønsker å spille med mer data? Sara skrev nylig opp trinn for å lage din egen serverless API fra en liste over offentlige Api-er.