Med hjälp av data i Reagerar med Fetch API och axios

0
11

Om du är ny att Reagera, och kanske bara har spelat med byggnaden att göra och motverka apps, du kanske ännu inte har stött på ett behov av att dra in data för din app. Det kommer troligen att komma en tid då du kommer att behöva göra detta, som Reagerar apps är mest lämpad för situationer där du hanterar både data och staten.

Den första uppsättningen av data som du kan behöva för att hantera kan vara hårdkodade i din Reagera ansökan, som vi gjorde för demo från vårt Fel Gränsen tutorial:

Se Pennan fel gränsen 0 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Vad händer om du vill hantera data från ett API? Det är syftet med denna handledning. Specifikt, vi kommer att göra bruk av Fetch API och axios som exempel för hur man begära och använda data.

Fetch API

Fetch API är ett gränssnitt för att hämta resurser. Vi kommer att använda det för att hämta data från en tredje part API och se hur man kan använda det när du hämtar data från en API byggt i egen regi.

Med hjälp av Hämta med en tredje part API

Se Pennan Reagera Hämta API Penna 1 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Vi kommer att hämta slumpmässigt användare från JSONPlaceholder, en falsk online REST API för att testa. Låt oss börja med att skapa vår del och förklara vissa grundinställningar.

klass App sträcker sig Reagera.Komponent {
state = {
isLoading: sant,
användare: [],
fel: null
}

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

Det kommer att bli en fördröjning när uppgifter begärs av nätverket. Det kan vara några sekunder, eller kanske ett par millisekunder. Hursomhelst, under denna försening, det är god praxis att låta användarna vet att något händer medan begäran är bearbetning.

För att göra det vi kommer att göra bruk av isLoading att antingen visa lastning meddelande eller de begärda uppgifterna. Data kommer att visas när isLoading är falskt, annars läser in meddelandet kommer att visas på skärmen. Så render () – metoden kommer att se ut så här:

render() {
const { isLoading, användare, fel } = i detta.stat.
avkastning (
<Reagera.Fragment>
<h1>Slumpmässigt Användare</h1>
// Visar ett meddelande om vi stöter på ett fel
{fel ? <p>{fel.meddelande}</p> : null}
// Här är våra data in
{!isLoading ? (
användare.karta(user => {
const { användarnamn, namn, e-post } = användarnamn;
avkastning (
<div key={användarnamn}>
<p>Namn: {name}</p>
<p>E-post Adress: {e}</p>
<hr />
</div>
);
})
// Om det är en fördröjning i data, låt användaren vet att det är lastning
) : (
<h3>Laddar…</h3>
)}
</Reagera.Fragment>
);
}

Koden är i stort sett gör detta:

  1. De strukturer isLoading, användare och fel från ansökan staten så att vi inte behöver fortsätta att skriva här.stat.
  2. Skriver ut ett meddelande om programmet stöter på ett fel att upprätta en anslutning
  3. Kontroller för att se om data laddas
  4. Om laddar inte händer, då måste vi ha data, så vi visa den
  5. Om belastningen är som händer, då vi fortfarande måste jobba på det och visa “Loading…” medan appen fungerar

För Steg 3-5 för att arbeta, måste vi göra en förfrågan för att hämta data från ett API. Det är där JSONplaceholder API kommer att komma till hands för vårt exempel.

fetchUsers() {
// Där vi hämtar uppgifter från
hämta(`https://jsonplaceholder.typicode.com/users`)
// Vi får API svar och ta emot data i JSON-format…
.sedan(som svar => svar.json())
// …då vi uppdatera användare staten
.sedan(data =>
detta.setState({
användare: data,
isLoading: false,
})
)
// Fånga något fel är vi hit och uppdatera appen
.catch(fel => här.setState({ error, isLoading: false }));
}

Vi skapar en metod som kallas fetchUser() och använda den för att göra exakt vad du kanske tror: begär användarens data från API slutpunkt och hämta det för vår app. Fetch är ett löfte-baserad API som returnerar ett svar objekt. Så använder vi oss av json() metod för att få svar objekt som lagras i data och används för att uppdatera status för användare i vår ansökan. Vi måste också ändra status för isLoading till false så att vår ansökan vet att laddningen har avslutats och allt är klart för att göra uppgifterna.

Det faktum att Hämta lova-baserat innebär att vi också kan ta fel att använda den .catch () – metoden. Eventuella fel som uppstått används ett värde för att uppdatera vårt fel tillstånd. Praktiskt!

Första gången programmet gör, uppgifterna inte har tagits emot — det kan ta några sekunder. Vi vill att utlösa metod för att hämta användare när ansökan staten kan nås för en uppdatering och ansökan åter utförs. Reagera är componentDidMount() är den bästa platsen för detta, så vi kommer att placera fetchUsers() metoden i det.

componentDidMount() {
detta.fetchUsers();
}
Med hjälp av Hämta Med egna Ägda API

Hittills har vi tittat på hur man sätter någon annans data för att använda i en ansökan. Men vad händer om vi arbetar med våra egna uppgifter i vårt eget API? Det är vad vi kommer att täcka just nu.

Se Pennan Reagera Hämta API Pen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Jag byggt ett API som är tillgänglig på GitHub. JSON svar får du den har släppts ut på AWS — det är vad vi kommer att använda för denna tutorial.

Som vi gjorde innan, låt oss skapa vår del och satt upp några grundinställningar.

klass App sträcker sig Reagera.Komponent {
state = {
isLoading: sant,
inlägg: [],
fel: null
}

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

Vår metod för att loopa igenom uppgifterna kommer att vara annorlunda från den vi använt tidigare, men bara på grund av uppgifternas struktur, som kommer att vara annorlunda. Du kan se skillnaden mellan våra data-struktur här och vi fått från JSONPlaceholder.

Här är hur render () – metoden kommer att se ut för vårt API:

render() {
const { isLoading, inlägg, fel } = i detta.stat.
avkastning (
<Reagera.Fragment>
<h1>Reagera Hämta – Blogg</h1>
<hr />
{!isLoading ? Objektet.nycklar(inlägg).karta(key = <Posta key={nyckel} body={inlägg[key]} />) : <h3>Laddar…</h3>}
</Reagera.Fragment>
);
}

Låt oss bryta ner logik

{
!isLoading ?
Objektet.nycklar(inlägg).karta(key = <Posta key={nyckel} body={inlägg[key]} />)
: <h3>Laddar…</h3>
}

När isLoading är inte sant, vi returnera en array, karta genom den och vidarebefordra information till Inlägg komponent som rekvisita. Annars kan vi visa en “Loading…” visas medan programmet är på jobbet. Mycket liknande innan.

Metoden för att hämta inlägg kommer att se ut som den används i den första delen.

fetchPosts() {
// API där vi hämtar uppgifter från
hämta(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`)
// Vi får ett svar och ta emot data i JSON-format…
.sedan(som svar => svar.json())
// …då vi uppdaterar vår ansökan
.då(
data =>
detta.setState({
inlägg: data,
isLoading: false,
})
)
// Om vi fånga fel i stället för ett svar, låt oss uppdatera appen
.catch(fel => här.setState({ error, isLoading: false }));
}

Nu kan vi ringa fetchPosts metod inne i en componentDidMount () – metoden

componentDidMount() {
detta.fetchPosts();
}

I Inlägget komponent, vi kort igenom de rekvisita som vi fått och göra titeln och innehållet för varje inlägg:

const Inlägg = ({ kropp }) => {
avkastning (
<div>
{kroppen.karta(post => {
const { id, titel, innehåll } = post;
avkastning (
<div key={id}>
<h2>{title}</h2>
<p>{content}</p>
<hr />
</div>
);
})}
</div>
);
};

Där har vi det! Nu vet vi hur man använder Fetch API för att begära data från olika källor och lägga den till användning i en ansökan. High fives. ✋

axios

OK, så vi har tillbringat en bra tid att titta på Fetch API och nu ska vi vända vår uppmärksamhet till axios.

Som Fetch API, axios är ett sätt som vi kan göra en begäran om uppgifter att använda i vår ansökan. Där axios lyser är hur den gör det möjligt för dig att skicka ett asynkron begäran till ÖVRIGA effektmått. Detta är praktiskt när du arbetar med REST API i en Reagera projektet, säger en huvudlös WordPress CMS.

Det finns en pågående debatt om huruvida kommentaren är bättre än axios och vice versa. Vi kommer inte att dyka in i det här, eftersom, tja, du kan välja rätt verktyg för rätt jobb. Om du är nyfiken på poäng från varje sida, kan du läsa här och här.

Med hjälp av axios med en tredje part API

Se Pennan Reagera Axios 1 Penna av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Som vi gjorde med Fetch API, låt oss börja genom att begära data från ett API. För att denna, som vi ska hämta slumpmässigt användare från Slumpmässig Användare API.

För det första, vi skapar Appen en komponent som vi har gjort det varje gång innan:

klass App sträcker sig Reagera.Komponent {
state = {
användare: [],
isLoading: sant,
fel: null
};

render() {
avkastning (
<Reagera.Fragment>
</Reagera.Fragment>
);
}
}

Idén är fortfarande den samma: kontrollera för att se om belastningen är i processen och antingen göra uppgifterna vi får tillbaka eller låta användaren vet att saker och ting är fortfarande laddas.

För att göra ansökan till API, vi kommer att skapa en funktion. Vi kallar funktionen getUsers(). Inne i det, vi kommer att göra ansökan till API med axios. Låt oss se hur det ser ut innan du förklara vidare.

getUsers() {
// Vi använder axios i stället för att Hämta
axios
// API-vi begär data från
.få(“https://randomuser.me/api/?results=5″)
// När vi får ett svar, vi kommer karta API endpoints till vår rekvisita
.sedan(som svar =>
svar.uppgifter.resultat.karta(user => ({
namn: `${user.namn.först} ${user.namn.förra}`,
användarnamn: `${user.logga in.username}`,
e-post: `${user.e-post}`,
bild: `${user.bild.miniatyr}`
}))
)
// Låt oss se till att ändra ladda staten för att visa data
.då(användare => {
detta.setState({
användare
isLoading: falskt
});
})
// Vi kan fortfarande använda den”.catch () ” – metoden eftersom axios är löfte-baserade
.catch(fel => här.setState({ error, isLoading: false }));
}

Helt annorlunda från de Hämta exempel, eller hur? Den grundläggande strukturen är faktiskt ganska liknande, men nu är vi i branschen för mappning av data mellan ändpunkterna.

GET-begäran skickas från API-URL som parameter. Den respons vi får från API: et innehåller ett objekt som kallas data och som innehåller andra objekt. Den information vi vill ha är tillgängliga i data.resultaten, som är en array av objekt som innehåller uppgifter om enskilda användare.

Här går vi igen med att ringa vår metod insidan av componentDidMount() metoden:

componentDidMount() {
detta.getUsers();
}

Alternativt, kan du göra detta i stället och i princip kombinera dessa två första steg:

componentDidMount() {
axios
.få(“https://randomuser.me/api/?results=5”)
.sedan(som svar =>
svar.uppgifter.resultat.karta(user => ({
namn: `${user.namn.först} ${user.namn.förra}`,
användarnamn: `${user.logga in.username}`,
e-post: `${user.e-post}`,
bild: `${user.bild.miniatyr}`
}))
)
.då(användare => {
detta.setState({
användare
isLoading: falskt
});
})
.catch(fel => här.setState({ error, isLoading: false }));
}

Om du är kodning lokalt från din maskin, kan du tillfälligt ändra getUsers () – funktionen för att se ut så här:

getUsers() {
axios
.få(“https://randomuser.me/api/?results=5”)
.sedan(som svar => konsol.log(svar))
.catch(fel => här.setState({ error, isLoading: false }));
}

Konsolen ska få något som liknar detta:

Karta vi igenom resultaten array för att få den information som vi behöver för varje användare. Den mängd användare som sedan används för att ställa in ett nytt värde för våra användare staten. Med det gjort, vi kan sedan ändra värdet på isLoading.

Som standard, isLoading är satt till true. När staten användare är uppdaterad, vi vill ändra värdet på isLoading falskt eftersom det är kö vår app är ute för att göra övergången från “Laddar…” för att återgivna data.

render() {
const { isLoading, användare } = i detta.stat.
avkastning (
<Reagera.Fragment>
<h2>Slumpmässigt Användare</h2>
<div>
{!isLoading ? (
användare.karta(user => {
const { användarnamn, namn, e-post, bild } = användarnamn;
avkastning (
<div key={användarnamn}>
<p>{name}</p>
<div>
<img src={bild} alt={name} />
</div>
<p>{e}</p>
<hr />
</div>
);
})
) : (
<p>Laddar…</p>
)}
</div>
</Reagera.Fragment>
);
}

Om du loggar användarna staten till konsolen, kommer du att se att det är en array med objekt:

En tom array visar värdet innan uppgifterna har erhållits. Den returnerade data innehåller bara namn, användarnamn, e-postadress och bilden av enskilda användare eftersom de är de effektmått vi stakat ut. Det är mycket mer tillgängliga data från API, naturligtvis, men vi skulle behöva lägga till dem till våra getUsers metod.

Med hjälp av axios med ditt eget API

Se Pennan Reagera Axios 2 Pen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Du har sett hur man kan använda axios med en tredje part API-men vi kan titta på hur det är att begära uppgifter från vårt eget API, precis som vi gjorde med Fetch API. I själva verket, låt oss använda samma JSON-fil som vi använde för att Hämta så att vi kan se skillnaden mellan de två metoderna.

Här är allt tillsammans:

klass App sträcker sig Reagera.Komponent {
// En stat som kommer att gälla för inlägg objekt som är inställd på att fylla på som standard
state = {
inlägg: [],
isLoading: sant,
fel: null
};
// Nu ska vi göra en förfrågan om data med hjälp av axios
getPosts() {
axios
// Det är där data är värd
.få(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”)
// När vi får ett svar och lagra data, låt oss ändra ladda staten
.sedan(som svar => {
detta.setState({
inlägg: svar.uppgifter.inlägg,
isLoading: falskt
});
})
// Om vi fånga eventuella fel ansluta, låt oss uppdatera detta
.catch(fel => här.setState({ error, isLoading: false }));
}
// Låt vår app vet att vi är redo att göra uppgifterna
componentDidMount() {
detta.getPosts();
}
// Lägger till att data att använda
render() {
const { isLoading, inlägg } = i detta.stat.
avkastning (
<Reagera.Fragment>
<h2>Random Inlägg</h2>
<div>
{!isLoading ? (
inlägg.karta(post => {
const { id, titel, innehåll } = post;
avkastning (
<div key={id}>
<h2>{title}</h2>
<p>{content}</p>
<hr />
</div>
);
})
) : (
<p>Laddar…</p>
)}
</div>
</Reagera.Fragment>
);
}
}

Den huvudsakliga skillnaden mellan denna metod och med hjälp av axios att hämta från en tredje part är hur informationen är formaterad. Vi får rakt upp JSON detta sätt snarare än att kartlägga ändpunkter.

Inlägg data vi får från API: et används för att uppdatera värdet av den del inlägg staten. Med detta kan vi kort igenom det utbud av tjänster i render(). Vi då få id, titel och innehåll för varje inlägg med ES6 de-strukturering, som sedan levererats till användaren.

Som vi gjorde innan, vad som visas beror på värdet av isLoading. När vi satte ett nytt tillstånd för inlägg via data som erhållits från API, vi var tvungna att ställa in ett nytt tillstånd för isLoading också. Då kan vi äntligen låta användaren vet data läses eller att data som vi har fått.

asynkron och väntar

En annan sak som lovar-baserade nate av axios tillåter oss att göra är att dra nytta av är asynkron och väntar . Med hjälp av detta, getPosts () – funktionen kommer att se ut så här.

async getPosts() {
const svar = väntar axios.få(“https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json”);
try {
detta.setState({
inlägg: svar.uppgifter.inlägg,
isLoading: falskt
});
} catch (error) {
detta.setState({ error, isLoading: false });
}
}
Basen exempel

Med axios, det är möjligt att skapa en bas exempel där vi släpper i URL: en för vårt API som så:

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

…då använda sig av det så här:

async getPosts() {
const svar = väntar api.få();
try {
detta.setState({
inlägg: svar.uppgifter.inlägg,
isLoading: falskt
});
} catch (error) {
detta.setState({ error, isLoading: false });
}
}

Helt enkelt ett trevligt sätt att abstrahera API URL.

Nu, data alla saker!

När du bygger Reagera program, kommer du att stöta på massor av scenarier där du vill att hantera data från ett API. Förhoppningsvis vet du att känna beväpnade och redo att rulla med data från en mängd olika källor med alternativ för hur du begär det.

Vill du spela med mer data? Sarah skrev nyligen upp steg för att skapa din egen serverlösa API från en lista av offentliga Api: er.