API-de kasutamine Reactis, kasutades funktsiooni Fetch ja Axios

API (Application Programming Interface) on protokollide kogum, mis võimaldab rakendusel saata serverisse päringuid ja saada vastust.

API-de kaudu saate integreerida tarkvara osi oma rakendusse ilma tüütu tööta. Seda API kasutamise protsessi teie rakenduses nimetatakse üldiselt API tarbimiseks. Näiteks kui soovite oma veebisaidil kuvada teatud asukohta, kasutaksite Google Mapsi API-t, selle asemel, et rakendada kaardifunktsiooni nullist. Seetõttu vähendavad API-d teie töökoormust ja säästavad teie aega.

Et õppida, kuidas Fetch ja Axios abil Reactis REST API-sid tarbida, koostate lihtsa Reacti rakenduse, mis nupu klõpsamisel saab API-st juhusliku fakti kasside kohta.

API-de tüübid

API-sid saab klassifitseerida saadavuse või kasutusjuhtumi järgi. Saadavuse osas võivad API-d olla avalikud, privaatsed, partner- või liit-API-d. Eesmärgi järgi klassifitseerituna võivad need olla andmebaasi, kaugjuhtimissüsteemi, operatsioonisüsteemide või veebi API-de. Selles artiklis kasutame teatud tüüpi veebi API-d, mida nimetatakse REST-iks (esindusseisund) API.

REST API-d võimaldavad hankida andmeid allikast URL-i kaudu. Reactis on REST API-de tarbimiseks mitu meetodit. Selles artiklis käsitletakse kahte kõige populaarsemat meetodit, nimelt JavaScripti toomise API-d ja lubaduspõhist HTTP-kliendit Axios.

Seotud: Mis on REST API ja kuidas saate oma rakenduse või veebisaidi jaoks andmeid hankida

Eeldused

Selle juhendi järgimiseks peaks teil olema:

• Algteadmised JavaScriptist.
• Algteadmised Reacti ja Reacti konksudest.
• Teie arvutisse kohapeal installitud NPM.
• Teie valitud tekstiredaktor või IDE installitud.

Looge reageerimisrakendus

Esiteks peate looma Reacti rakenduse. Reacti arenduskeskkonna seadistamiseks kopeerige oma terminalis järgmine käsk.

npx loo-reageeri-rakenduse katfakt

Kui käsk on täitmise lõpetanud, avage katfakt kausta oma tekstiredaktoris. Kirjutate oma koodi rakenduses App.js faili src kausta, nii et jätkake ja eemaldage mittevajalik kood.

import "./App.css";
function App() {
 tagasi (


Vajutage nuppu juhusliku kassi fakti vaatamiseks!



Hankige kassi fakt



 );
}
ekspordi vaikerakendus;

Järgmisena looge lihtne kasutajaliides, mida kasutatakse juhusliku kassi fakti kuvamiseks.

sisse app.js

import './App.css';
function App() {
 tagasi (


Vajutage nuppu juhusliku kassi fakti vaatamiseks!



Hankige kassi fakt



 );
}
ekspordi vaikerakendus;

Rakenduse stiili loomiseks lisage sellele järgmine kood app.css faili.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 fondiperekond: 'Playfair Display', serif;
 veeris: 20px 15vw;
}
h2 {
 fondiperekond: 'Playfair Display', serif;
 fondi kaal: 700;
 fondi suurus: 3em;
}
nupp {
 polsterdus: 1em 1,2em;
 piir: puudub;
 fondi suurus: 1 em;
 taustavärv: #131212;
 värv: #ffffff;
 piiri raadius: 0,5 em;
 kursor: kursor;
}
nupp: hover{
 taustavärv:#3b3b3b;
}

Teie rakendus peaks nüüd välja nägema selline.

Järgmiste sammude käigus hangite API-st andmed ja kuvate need rakenduses.

Seotud: Kuidas luua JavaScriptiga oma esimene reageerimisrakendus

REST API-de tarbimine Fetch abil

Tõmba API on liides, mis võimaldab hankida API-lt ressursse HTTP päringute kaudu. The tõmba() meetod saab kohustusliku argumendina ressursi tee URL-i ja tagastab lubaduse, mis võib vastuseks laheneda.

Põhisüntaks tõmba() meetod on järgmine:

too ('ressursi URL')
 .then (vastus => // käsitle vastust)
 .catch (err => // käepideme viga)

Fetch API juurutamine

Reactis kasutatakse Fetch API-t samamoodi, nagu seda kasutatakse tavalises JavaScriptis.

tõmba(" https://catfact.ninja/fact")
 .then (vastus => vastus.json())
 .then (andmed => // töötle andmeid)
 .catch (err => // käepideme viga)

Ülaltoodud koodi esimesel real edastate API URL-i aadressile tõmba() meetod. tõmba() tagastab HTTP vastuse, mis teisendatakse JSON-iks, kasutades json() meetod. Kolmandal real saate juurdepääsu andmetele, mida saate seejärel rakenduses kasutada. Lõpuks võimaldab püüdmisplokk teil vigu graatsiliselt käsitleda.

Rakenduse komponendis toomispäringu rakendamiseks kasutate Reacti konkse. Kasutades useEffect konks, teie rakendus esitab päringu pärast komponendi laadimist ja useState konks loob ja värskendab komponendi olekut. Oleku jälgimine tagab, et komponent renderdatakse uuesti, kui toomise API tagastab vastuse.

Seotud: Konksud: Reaktsiooni kangelane

import useState ja useEffect.
import { useEffect, useState } alates 'react'

Looge olek kassi fakti hoidmiseks ja funktsioon selle värskendamiseks.

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

Järgmisena looge funktsioon API-le GET-päringu tegemiseks ja kutsuge see sisse useEffect konks.

const fetchFact = () => {
tõmba(" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((andmed) => setFact (andmed.fact));
}
useEffect(() => {
 tõmbaFact()
}, []);

Teie fail app.js peaks nüüd välja nägema järgmine:

import "./App.css";
import { useEffect, useState } kohast "react";
function App() {
 const [fact, setFact] = useState("");
 const fetchFact = () => {
 tõmba(" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((andmed) => setFact (andmed.fact));
}
useEffect(() => {
 tõmbaFact()
}, []);
tagasi (


Vajutage nuppu juhusliku kassi fakti vaatamiseks!



Hankige kassi fakt
{fact}




);
}
ekspordi vaikerakendus;

Nüüd peaksite oma brauseris nägema juhuslikku fakti kasside kohta.

Järgmisena kirjutage kood, et kuvada nupul klõpsamisel juhuslik fakt.

Muutke nuppu, et lisada onClick sündmus ja selle käitleja funktsioon.

 HandClick()}>Hangi kassi fakt

Määratlege HandClick() funktsiooni, nagu allpool näidatud.

const handleClick = () => {
 tõmbaFact()
}

Nüüd, kui klõpsate nuppu, HandClick() funktsioon helistab too andmed () mis täidab API päringu ja värskendab olekut uue juhusliku faktiga. Seetõttu värskendatakse rakenduse kasutajaliidest, et kuvada praegune fakt.

REST API-de tarbimine Axiose abil

Selle asemel tõmba(), saate API-sid tarbida Axios. meeldib tõmba(), Axios võimaldab teil teha taotlusi API lõpp-punktile. Siiski on nende kahe vahel mitmeid erinevusi.

• Axios tagastab vastuse automaatselt JSON-is, samal ajal kui peate selle Fetch API kasutamisel JSON-iks teisendama.
• Erinevalt Fetch API-st nõuab Axios ainult ühte .then() tagasihelistamist.
• Axios ühildub suuremate brauseritega, samas kui Fetch toetab ainult Chrome 42+, Edge 14+, Firefox 39+ ja Safari 10+

Axiose rakendamine

Installige Axios, käivitades järgmise käsu.

npm install axios

Pärast installimise lõpetamist importige Axiose pakett oma rakenduse komponenti ja muutke seda tõmbaFact() funktsiooni selle kasutamiseks.

importida aksiosid ‘axios’st
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

see on kõik! Teie rakendus peaks brauseris laadimisel ja nupul klõpsamisel kuvama juhusliku kassifakti.

Rohkem kasutusvõimalusi Reactiga API-dele

Reactis saate REST API-sid kasutada erinevatel meetoditel. Selles õpetuses õppisite, kuidas kasutada Fetch ja Axios juhusliku fakti toomiseks REST API-st. API-de kasutusjuhtumeid reaalmaailma rakendustes on lõputult.

Näiteks maksete API-de (nt Stripe ja PayPal) kaudu saavad kauplused hõlpsalt veebis klientide tehinguid hallata, ilma et oleks vaja seda funktsiooni ise rakendada. Seetõttu saavad isegi vähem tehnoloogiatundlikud kasutajad luua kasulikke rakendusi, mis vastavad nende vajadustele.

Mis on API autentimine ja kuidas see töötab?

Kuidas tõestada, et inimene, kes soovib juurdepääsu olulistele andmetele, on see, kes ta end olevat? Siin tulebki sisse API autentimine...

Loe edasi

Autori kohta