Kaip naudoti API „React“ naudojant „Fetch“ ir „Axios“.

API (Application Programming Interface) yra protokolų rinkinys, leidžiantis programai siųsti užklausas į serverį ir gauti atsakymą.

Naudodamiesi API, galite integruoti programinės įrangos dalis į savo programą be kruopštaus darbo. Šis API naudojimo jūsų programoje procesas paprastai vadinamas API naudojimu. Pavyzdžiui, jei norite, kad svetainėje būtų rodoma tam tikra vieta, naudokite „Google Maps“ API, užuot įdiegę žemėlapio funkcijas nuo nulio. Todėl API sumažina darbo krūvį ir sutaupo laiko.

Norėdami sužinoti, kaip naudoti REST API programoje „React“, naudodami „Fetch“ ir „Axios“, sukursite paprastą „React“ programą, kuri iš API gautų atsitiktinį faktą apie kates, kai spustelėsite mygtuką.

API tipai

API galima klasifikuoti pagal prieinamumą arba naudojimo atvejį. Pasiekiamumo požiūriu API gali būti viešos, privačios, partnerių arba sudėtinės API. Suskirstę pagal paskirtį, jie gali būti duomenų bazės, nuotolinės, operacinės sistemos arba žiniatinklio API. Šiame straipsnyje mes naudosime žiniatinklio API tipą, vadinamą REST (representational State) API.

REST API leidžia gauti duomenis iš šaltinio per URL. „React“ yra keli metodai, kuriuos galite naudoti norėdami naudoti REST API. Šiame straipsnyje aptariami du populiariausi metodai, būtent „JavaScript Fetch“ API ir pažadais pagrįsta HTTP kliento „Axios“.

Susijęs: Kas yra REST API ir kaip galite paimti duomenis savo programai ar svetainei

Būtinos sąlygos

Norėdami vadovautis šiuo vadovu, turite turėti:

• Pagrindinis JavaScript supratimas.
• Pagrindinės žinios apie „React“ ir „React“ kabliukus.
• NPM įdiegtas jūsų kompiuteryje.
• Įdiegta jūsų pasirinkta teksto rengyklė arba IDE.

Sukurkite „React“ programą

Pirmiausia turėsite sukurti „React“ programą. Nukopijuokite šią komandą savo terminale, kad nustatytumėte „React“ kūrimo aplinką.

npx Create-React-app Catfact

Kai komanda baigs vykdyti, atidarykite kafaktas aplanką teksto rengyklėje. Kodą įrašysite į App.js failą src aplanką, todėl eikite į priekį ir pašalinkite nereikalingą kodą.

importuoti "./App.css";
function App() {
 grįžti (


Paspauskite mygtuką, kad sužinotumėte atsitiktinį katės faktą!



Gaukite katės faktą



 );
}
eksportuoti numatytąją programą;

Tada sukurkite paprastą vartotojo sąsają, kuri bus naudojama atsitiktiniam katės faktui parodyti.

Į app.js

importuoti './App.css';
function App() {
 grįžti (


Paspauskite mygtuką, kad sužinotumėte atsitiktinį katės faktą!



Gaukite katės faktą



 );
}
eksportuoti numatytąją programą;

Norėdami sukurti savo programos stilių, pridėkite šį kodą prie app.css failą.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 šriftų šeima: „Playfair Display“, serifas;
 paraštė: 20px 15vw;
}
h2 {
 šriftų šeima: „Playfair Display“, serifas;
 šrifto svoris: 700;
 šrifto dydis: 3 em;
}
mygtukas {
 kamšalas: 1em 1,2em;
 kraštinė: nėra;
 šrifto dydis: 1 em;
 fono spalva: #131212;
 spalva: #ffffff;
 kraštinės spindulys: 0,5 em;
 žymeklis: rodyklė;
}
mygtukas: užveskite pelės žymeklį{
 fono spalva:#3b3b3b;
}

Dabar jūsų programa turėtų atrodyti taip.

Atlikdami kitus veiksmus gausite duomenis iš API ir parodysite juos programoje.

Susijęs: Kaip sukurti savo pirmosios reakcijos programą naudojant „JavaScript“.

REST API naudojimas naudojant „Fetch“.

Gauti API yra sąsaja, leidžianti gauti išteklius iš API per HTTP užklausas. The atnešti () metodas gauna kelio į šaltinį URL kaip privalomą argumentą ir grąžina pažadą, kuris gali išspręsti atsakymą.

Pagrindinė sintaksė atnešti () metodas yra toks:

atkviesti('url į šaltinį')
 .then (response => // tvarkyti atsakymą)
 .catch (err => // rankenos klaida)

Diegimas „Fetch“ API

„React“ programoje „Fetch“ API naudojama taip pat, kaip ir paprastame „JavaScript“.

atnešti (" https://catfact.ninja/fact")
 .then (atsakymas => atsakymas.json())
 .the (duomenys => // tvarkyti duomenis)
 .catch (err => // rankenos klaida)

Pirmoje aukščiau esančio kodo eilutėje API URL perduodate į atnešti () metodas. atnešti () grąžina HTTP atsakymą, kuris konvertuojamas į JSON naudojant json () metodas. Trečioje eilutėje gausite prieigą prie duomenų, kuriuos galėsite naudoti programoje. Galiausiai sugavimo blokas leidžia grakščiai tvarkyti klaidas.

Norėdami įgyvendinti gavimo užklausą programos komponente, naudosite „React hooks“. Naudodami naudojimoEfektas kabliukas, jūsų programa pateiks užklausą, kai komponentas bus įkeltas ir useState kabliukas sukurs ir atnaujins komponento būseną. Stebėdami būseną užtikrinama, kad komponentas būtų iš naujo pateikiamas, kai gavimo API grąžina atsakymą.

Susijęs: Kabliukai: Reagavimo herojus

importuoti useState ir useEffect.
importuoti { useEffect, useState } iš 'react'

Sukurkite būseną, kurioje būtų saugomas katės faktas, ir funkciją ją atnaujinti.

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

Tada sukurkite funkciją GET užklausai pateikti API ir iškvieskite ją į naudojimoEfektas kabliukas.

const fetchFact = () => {
atnešti (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((duomenys) => setFact (duomenys.faktas));
}
useEffect(() => {
 fetchFact()
}, []);

Jūsų app.js failas dabar turėtų atrodyti taip:

importuoti "./App.css";
importuoti { useEffect, useState } iš "react";
function App() {
 const [faktas, setFact] = useState("");
 const fetchFact = () => {
 atnešti (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((duomenys) => setFact (duomenys.faktas));
}
useEffect(() => {
 fetchFact()
}, []);
grįžti (


Paspauskite mygtuką, kad sužinotumėte atsitiktinį katės faktą!



Gaukite katės faktą
{faktas}




);
}
eksportuoti numatytąją programą;

Dabar turėtumėte matyti atsitiktinį faktą apie kates, rodomus jūsų naršyklėje.

Tada parašykite kodą, kad spustelėjus mygtuką būtų rodomas atsitiktinis faktas.

Pakeiskite mygtuką, kad įtrauktumėte an paspaudus įvykis ir jo prižiūrėtojo funkcija.

 handClick()}>Gauti katės faktą

Apibrėžkite handClick() funkcija, kaip parodyta žemiau.

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

Dabar, kai spustelėsite mygtuką, handClick() funkcija iškvies gautiduomenys () kuri atliks API užklausą ir atnaujins būseną nauju atsitiktiniu faktu. Todėl programos vartotojo sąsaja bus atnaujinta, kad būtų rodomas dabartinis faktas.

REST API naudojimas naudojant „Axios“.

Vietoj atnešti (), galite naudoti API su Axios. Kaip atnešti (), „Axios“ leidžia pateikti užklausas API galutiniam taškui. Tačiau tarp jų yra keletas skirtumų.

• „Axios“ automatiškai grąžina atsakymą JSON, kol turite jį konvertuoti į JSON, kai naudojate „Fetch API“.
• „Axios“ reikalauja tik vieno .then() atgalinio iškvietimo, skirtingai nei naudojant „Fettch API“.
• „Axios“ suderinama su pagrindinėmis naršyklėmis, o „Fetch“ palaikoma tik „Chrome 42“ ir naujesnėse versijose, „Edge 14“ ir naujesnėse versijose, „Firefox 39“ ir naujesnėse versijose bei „Safari 10“ ir naujesnėse versijose.

„Axios“ įgyvendinimas

Įdiekite „Axios“ vykdydami šią komandą.

npm įdiegti axios

Baigę diegti, importuokite „Axios“ paketą į programos komponentą ir pakeiskite fetchFact() funkcija ja naudotis.

importuoti axios iš "axios"
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Viskas! Jūsų programa turėtų rodyti atsitiktinį katės faktą, kai ji įkeliama į naršyklę ir kai spustelite mygtuką.

Daugiau API naudojimo būdų su React

„React“ galite naudoti REST API naudodami įvairius metodus. Šiame vadove sužinojote, kaip naudoti „Fetch“ ir „Axios“, kad gautumėte atsitiktinį faktą iš REST API. API naudojimo atvejų realaus pasaulio programose yra begalė.

Pavyzdžiui, per mokėjimo API, pvz., „Stripe“ ir „PayPal“, parduotuvės gali lengvai tvarkyti klientų operacijas internetu, nereikės diegti šios funkcijos. Todėl net mažiau technologijų išmanantys vartotojai gali kurti naudingas programas, atitinkančias jų poreikius.

Kas yra API autentifikavimas ir kaip jis veikia?

Kaip įrodyti, kad asmuo, norintis pasiekti svarbius duomenis, yra tas, kas sakosi esąs? Štai čia ir atsiranda API autentifikavimas...

Skaitykite toliau

Apie autorių