API: ien käyttäminen Reactissa Fetchin ja Axiosin avulla

API (Application Programming Interface) on joukko protokollia, joiden avulla sovellus voi lähettää pyyntöjä palvelimelle ja vastaanottaa vastauksen.

Sovellusliittymien avulla voit integroida ohjelmistoja sovellukseesi ilman turhaa työtä. Tätä API: n käyttöä sovelluksessasi kutsutaan yleensä API: n käyttämiseksi. Jos esimerkiksi haluat näyttää tietyn sijainnin verkkosivustollasi, käytä Google Maps -sovellusliittymää sen sijaan, että toteuttaisit karttatoiminnot tyhjästä. Tämän vuoksi sovellusliittymät vähentävät työmäärääsi ja säästävät aikaa.

Oppiaksesi käyttämään REST-sovellusliittymiä Reactissa Fetchin ja Axiosin avulla, rakennat yksinkertaisen React-sovelluksen, joka saa satunnaisen faktan kissoista API: sta, kun napsautat painiketta.

API-tyypit

API: t voidaan luokitella saatavuuden tai käyttötapauksen mukaan. Saatavuus API: t voivat olla julkisia, yksityisiä, kumppani- tai yhdistelmäsovellusliittymiä. Kun ne luokitellaan käyttötarkoituksensa mukaan, ne voivat olla tietokanta, etäkäyttöjärjestelmä, käyttöjärjestelmä tai verkkosovellusliittymä. Tässä artikkelissa käytämme eräänlaista verkkosovellusliittymää nimeltä REST (Representational State) API.

REST-sovellusliittymien avulla voit saada tietoja lähteestä URL-osoitteen kautta. Reactissa on useita menetelmiä, joita voit käyttää REST-sovellusliittymien kuluttamiseen. Tässä artikkelissa käsitellään kahta suosituinta menetelmää, jotka ovat JavaScript Fetch API ja lupauspohjainen HTTP-asiakas Axios.

Aiheeseen liittyvä: Mikä on REST API ja kuinka voit napata tietoja sovelluksellesi tai verkkosivustollesi

Edellytykset

Jotta voit noudattaa tätä opasta, sinulla tulee olla:

• JavaScriptin perusymmärrys.
• Perustiedot Reactista ja React-koukuista.
• NPM asennettuna paikallisesti koneellesi.
• Valitsemasi tekstieditori tai IDE asennettu.

Luo React-sovellus

Ensin sinun on luotava React-sovellus. Määritä React-kehitysympäristö kopioimalla seuraava komento päätteeseesi.

npx create-react-app catfact

Kun komento on suoritettu loppuun, avaa catfact kansio tekstieditorissasi. Kirjoitat koodisi App.js-tiedostoon src kansio, joten mene eteenpäin ja poista tarpeeton koodi.

tuo "./App.css";
function App() {
 paluu (


Paina nappia saadaksesi satunnaisen kissafaktion!



Ota selvää Cat faktasta



 );
}
Vie oletussovellus;

Luo seuraavaksi yksinkertainen käyttöliittymä, jota käytetään näyttämään satunnainen kissafakta.

Sisään app.js

tuonti './App.css';
function App() {
 paluu (


Paina nappia saadaksesi satunnaisen kissafaktion!



Ota selvää Cat faktasta



 );
}
Vie oletussovellus;

Voit luoda sovelluksesi tyylin lisäämällä seuraavan koodin app.css tiedosto.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Sovellus {
 font-family: 'Playfair Display', serif;
 marginaali: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 fontin paino: 700;
 fontin koko: 3em;
}
painike {
 pehmuste: 1em 1,2em;
 reuna: ei mitään;
 fontin koko: 1em;
 taustaväri: #131212;
 väri: #ffffff;
 raja-säde: 0,5 em;
 kohdistin: osoitin;
}
painike: hover{
 taustaväri:#3b3b3b;
}

Sovelluksesi pitäisi nyt näyttää tältä.

Seuraavissa vaiheissa noutat tiedot API: sta ja näytät ne sovelluksessa.

Aiheeseen liittyvä: Kuinka luoda ensimmäinen reagointisovelluksesi JavaScriptillä

REST-sovellusliittymien käyttäminen Fetchillä

Hae API on käyttöliittymä, jonka avulla voit saada resursseja API: lta HTTP-pyyntöjen kautta. The hae() menetelmä vastaanottaa resurssin polun URL-osoitteen pakollisena argumenttina ja palauttaa lupauksen, joka voi ratkaista vastauksen.

Kohteen perussyntaksi hae() menetelmä on seuraava:

hae ('resurssin URL-osoite')
 .then (response => // käsittele vastausta)
 .catch (err => // käsittelyvirhe)

Toteutetaan Fetch API

Reactissa Fetch API: ta käytetään samalla tavalla kuin tavallisessa JavaScriptissä.

hae(" https://catfact.ninja/fact")
 .then (response => vastaus.json())
 .then (data => // käsittele dataa)
 .catch (err => // käsittelyvirhe)

Yllä olevan koodin ensimmäisellä rivillä välität API-URL-osoitteen osoitteeseen hae() menetelmä. hae() palauttaa HTTP-vastauksen, joka muunnetaan JSON-muotoon käyttämällä json() menetelmä. Kolmannella rivillä pääset käsiksi tietoihin, joita voit sitten käyttää sovelluksessa. Lopuksi kiinnityslohkon avulla voit käsitellä virheitä sulavasti.

Noutopyynnön toteuttamiseksi sovelluskomponentissa käytät React-koukkuja. Käyttämällä useEffect koukku, sovelluksesi tekee pyynnön, kun komponentti latautuu ja useState hook luo ja päivittää komponentin tilan. Tilan seuraaminen varmistaa, että komponentti hahmonnetaan uudelleen, kun haun API palauttaa vastauksen.

Aiheeseen liittyvä: Koukut: Reaktion sankari

tuo useState ja useEffect.
tuo { useEffect, useState } kohteesta 'react'

Luo tila kissan faktan säilyttämiseksi ja toiminto sen päivittämiseksi.

const [fact, setFact] = useState('')

Luo seuraavaksi funktio GET-pyynnön tekemiseksi API: lle ja kutsu se sisään useEffect koukku.

const fetchFact = () => {
hae(" https://catfact.ninja/fact")
 .then((vastaus) => vastaus.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

App.js-tiedostosi pitäisi nyt näyttää tältä:

tuo "./App.css";
tuonti { useEffect, useState } "react"-kentästä;
function App() {
 const [fakta, setFact] = useState("");
 const fetchFact = () => {
 hae(" https://catfact.ninja/fact")
 .then((vastaus) => vastaus.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
paluu (


Paina nappia saadaksesi satunnaisen kissafaktion!



Ota selvää Cat faktasta
{fakta}




);
}
Vie oletussovellus;

Sinun pitäisi nyt nähdä satunnainen fakta kissoista selaimessasi.

Kirjoita seuraavaksi koodi näyttääksesi satunnaisen tosiasian, kun painiketta napsautetaan.

Muokkaa painiketta niin, että se sisältää an klikkaamalla tapahtuma ja sen käsittelijätoiminto.

 handleClick()}>Hae kissatieto

Määrittele handleClick() toimi alla olevan kuvan mukaisesti.

const handleClick = () => {
 fetchFact()
}

Nyt kun napsautat painiketta, handleClick() toiminto kutsuu fetchData() joka suorittaa API-pyynnön ja päivittää tilan uudella satunnaisella tosiasialla. Tämän seurauksena sovelluksen käyttöliittymä päivittyy näyttämään nykyisen tosiasian.

REST-sovellusliittymien kuluttaminen Axiosin avulla

Sijasta hae(), voit käyttää sovellusliittymiä Axios. Kuten hae(), Axios antaa sinun tehdä pyyntöjä API-päätepisteeseen. Näiden kahden välillä on kuitenkin useita eroja.

• Axios palauttaa vastauksen automaattisesti JSON-muodossa, kun sinun on muutettava se JSON-muotoon, kun käytät Fetch API: ta.
• Axios vaatii vain yhden .then()-takaisinkutsun, toisin kuin Fetch API.
• Axios on yhteensopiva suurten selainten kanssa, kun taas Fetchiä tuetaan vain Chrome 42+, Edge 14+, Firefox 39+ ja Safari 10+

Axioiden toteuttaminen

Asenna Axios suorittamalla seuraava komento.

npm asennus axios

Kun asennus on valmis, tuo Axios-paketti sovelluskomponenttiin ja muokkaa sitä fetchFact() toiminto käyttää sitä.

tuo aksioita "aksioista"
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Se siitä! Sovelluksesi pitäisi näyttää satunnainen kissafakta, kun se latautuu selaimeen ja kun napsautat painiketta.

Lisää käyttötapoja Reactin sovellusliittymille

Voit käyttää REST-sovellusliittymiä Reactissa useilla eri tavoilla. Tässä opetusohjelmassa opit käyttämään Fetchiä ja Axioita satunnaisen tosiasian hakemiseen REST API: sta. API: iden käyttötapaukset tosielämän sovelluksissa ovat loputtomat.

Esimerkiksi Stripen ja PayPalin kaltaisten maksusovellusliittymien kautta kaupat voivat helposti käsitellä asiakkaiden tapahtumia verkossa ilman, että toimintoa tarvitsee ottaa käyttöön itse. Siksi jopa vähemmän teknologiaa ymmärtävät käyttäjät voivat rakentaa hyödyllisiä sovelluksia, jotka palvelevat heidän tarpeitaan.

Mikä on API-todennus ja miten se toimii?

Kuinka todistat, että henkilö, joka haluaa päästä käsiksi tärkeisiin tietoihin, on se, joka hän sanoo olevansa? Siellä API-todennus tulee esiin...

Lue Seuraava

Kirjailijasta