Cum să consumați API-uri în React folosind Fetch și Axios

Un API (Application Programming Interface) este un set de protocoale care permite unei aplicații să trimită cereri către un server și să primească un răspuns.

Prin intermediul API-urilor, puteți integra bucăți de software în aplicația dvs. fără munca de fond. Acest proces de utilizare a unui API în aplicația dvs. este denumit în general consumarea unui API. De exemplu, dacă doriți să afișați o anumită locație pe site-ul dvs. web, ați folosi API-ul Google Maps în loc să implementați funcționalitatea hărții de la zero. Prin urmare, API-urile vă reduc volumul de muncă și vă economisesc timp.

Pentru a afla cum să consumați API-urile REST în React folosind Fetch și Axios, veți construi o aplicație React simplă care obține o informație aleatorie despre pisici dintr-un API atunci când faceți clic pe un buton.

Tipuri de API-uri

API-urile pot fi clasificate fie în funcție de disponibilitate, fie de caz de utilizare. În ceea ce privește disponibilitatea, API-urile pot fi publice, private, partenere sau API-uri compozite. Când sunt clasificate în funcție de scopul lor, pot fi baze de date, la distanță, sisteme de operare sau API-uri web. În acest articol, vom consuma un tip de API web numit REST (Reprezentational State) API.

API-urile REST vă permit să obțineți date dintr-o sursă printr-o adresă URL. În React, există mai multe metode pe care le puteți utiliza pentru a consuma API-uri REST. Acest articol discută cele mai populare două metode și anume API-ul JavaScript Fetch și clientul HTTP Axios bazat pe promisiuni.

Legate de: Ce este API-ul REST și cum puteți obține date pentru aplicația sau site-ul dvs

Cerințe preliminare

Pentru a urma acest ghid, ar trebui să aveți:

• Înțelegerea de bază a JavaScript.
• Cunoștințe de bază despre React și React hooks.
• NPM instalat local pe mașina dvs.
• Instalat un editor de text sau IDE la alegere.

Creați o aplicație React

Mai întâi, va trebui să creați o aplicație React. Copiați următoarea comandă în terminalul dvs. pentru a configura un mediu de dezvoltare React.

npx create-react-app catfact

Odată ce comanda s-a încheiat executarea, deschideți catfact folderul din editorul de text. Veți scrie codul în fișierul App.js din src folder, așa că mergeți mai departe și eliminați codul inutil.

import „./App.css”;
function App() {
 întoarcere (


Apăsați butonul pentru un fapt aleatoriu despre pisică!



Obțineți faptele despre Cat



 );
}
exportați aplicația implicită;

Apoi, creați o interfață simplă care va fi folosită pentru a afișa faptele aleatorii ale pisicii.

În app.js

import './App.css';
function App() {
 întoarcere (


Apăsați butonul pentru un fapt aleatoriu despre pisică!



Obțineți faptele despre Cat



 );
}
exportați aplicația implicită;

Pentru a vă stila aplicația, adăugați următorul cod la app.css fişier.

@import URL(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Aplicația {
 font-family: „Playfair Display”, serif;
 marja: 20px 15vw;
}
h2 {
 font-family: „Playfair Display”, serif;
 greutate font: 700;
 dimensiunea fontului: 3em;
}
butonul {
 umplutură: 1em 1.2em;
 chenar: niciunul;
 dimensiunea fontului: 1em;
 culoare de fundal: #131212;
 culoare: #ffffff;
 raza-limită: 0,5em;
 cursor: pointer;
}
buton: hover{
 culoare de fundal:#3b3b3b;
}

Aplicația dvs. ar trebui să arate acum astfel.

În următorii pași, veți prelua date din API și le veți afișa în aplicație.

Legate de: Cum să creezi prima ta aplicație React cu JavaScript

Consumul de API-uri REST folosind Fetch

Preluare API este o interfață care vă permite să obțineți resurse de la un API prin solicitări HTTP. The aduce() metoda primește adresa URL a căii către resursă ca argument obligatoriu și returnează o promisiune care se poate rezolva la un răspuns.

Sintaxa de bază a aduce() metoda este urmatoarea:

fetch(‘url la resursă’)
 .then (răspuns => // gestionează răspunsul)
 .catch (err => // tratează eroarea)

Implementarea API-ului Fetch

În React, API-ul Fetch este folosit în același mod în care este folosit în JavaScript simplu.

aduce(" https://catfact.ninja/fact")
 .then (răspuns => răspuns.json())
 .then (date => // gestionează datele)
 .catch (err => // tratează eroarea)

În prima linie din codul de mai sus, transmiteți adresa URL API către aduce() metodă. aduce() returnează un răspuns HTTP care este convertit în JSON folosind json() metodă. În a treia linie, aveți acces la datele pe care apoi le puteți utiliza în aplicație. În cele din urmă, blocul catch vă permite să gestionați erorile cu grație.

Pentru a implementa cererea de preluare în componenta aplicației, veți folosi cârlige React. Prin folosirea useEffect cârlig, aplicația dvs. va face cererea odată ce componenta se încarcă și useState hook va crea și actualiza starea componentei. Urmărirea stării asigură că componenta se redă din nou atunci când API-ul de preluare returnează răspunsul.

Legate de: Hooks: Eroul lui React

import useState și useEffect.
import { useEffect, useState } din „react”

Creați o stare pentru a păstra fapta pisicii și funcția pentru a-l actualiza.

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

Apoi, creați o funcție pentru a face cererea GET către API și apelați-o în useEffect cârlig.

const fetchFact = () => {
aduce(" https://catfact.ninja/fact")
 .then((răspuns) => răspuns.json())
 .then((date) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Fișierul dvs. app.js ar trebui să arate acum astfel:

import „./App.css”;
import { useEffect, useState } din „react”;
function App() {
 const [fapt, setFact] = useState("");
 const fetchFact = () => {
 aduce(" https://catfact.ninja/fact")
 .then((răspuns) => răspuns.json())
 .then((date) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
întoarcere (


Apăsați butonul pentru un fapt aleatoriu despre pisică!



Obțineți faptele despre Cat
{fapt}




);
}
exportați aplicația implicită;

Acum ar trebui să puteți vedea un fapt aleatoriu despre pisici afișat în browser.

Apoi, scrieți codul pentru a afișa un fapt aleatoriu atunci când se face clic pe butonul.

Modificați butonul pentru a include un onClick eveniment și funcția de gestionare a acestuia.

 handleClick()}>Get Cat fact

Definiți handleClick() funcţionează după cum se arată mai jos.

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

Acum, când faceți clic pe butonul, handleClick() funcția va apela fetchData() care va efectua solicitarea API și va actualiza starea cu un nou fapt aleatoriu. În consecință, interfața de utilizare a aplicației se va actualiza pentru a afișa fapta curentă.

Consumul de API-uri REST folosind Axios

In loc de aduce(), puteți consuma API-uri cu Axios. Ca aduce(), Axios vă permite să faceți solicitări către un punct final API. Cu toate acestea, există mai multe diferențe între cele două.

• Axios returnează automat răspunsul în JSON, în timp ce trebuie să îl convertiți în JSON când utilizați API-ul Fetch.
• Axios necesită un singur apel invers .then(), spre deosebire de API-ul Fetch.
• Axios este compatibil cu browserele majore, în timp ce Fetch este acceptat numai în Chrome 42+, Edge 14+, Firefox 39+ și Safari 10+.

Implementarea Axios

Instalați Axios rulând următoarea comandă.

npm instalează axios

După finalizarea instalării, importați pachetul Axios în componenta aplicației și modificați fetchFact() funcția de utilizare.

importați axios din „axios”
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Asta e! Aplicația dvs. ar trebui să afișeze un fapt aleatoriu despre pisică atunci când se încarcă în browser și când faceți clic pe butonul.

Mai multe utilizări pentru API-uri cu React

Puteți consuma API-uri REST în React folosind diferite metode. În acest tutorial, ați învățat cum să utilizați Fetch și Axios pentru a prelua un fapt aleatoriu dintr-un API REST. Cazurile de utilizare ale API-urilor în aplicațiile din lumea reală sunt nesfârșite.

De exemplu, prin intermediul API-urilor de plată precum Stripe și PayPal, magazinele pot gestiona cu ușurință tranzacțiile clienților online, fără a fi nevoie să implementeze singure funcționalitatea. Prin urmare, utilizatorii și mai puțin cunoscători de tehnologie pot construi aplicații utile care să le satisfacă nevoile.

Ce este autentificarea API și cum funcționează?

Cum demonstrezi că persoana care dorește să acceseze date importante este cine spune că este? Aici intervine autentificarea API...

Citiți în continuare

Despre autor