• Introducere
  • Ce este fetch() în React?
  • De ce să folosiți fetch() în React?
  • Configurarea fetch() în React
  • Efectuarea unei cereri GET cu fetch()
  • Gestionarea erorilor fetch()
  • Efectuarea solicitărilor POST cu fetch()
  • Concluzie

Introducere

În dezvoltarea web modernă, preluarea datelor este o parte esențială a construirii de aplicații dinamice și interactive. În React, există diferite moduri de a prelua date de la un API sau un server, iar o metodă populară este utilizarea funcției fetch(). Această funcție vă permite să faceți solicitări HTTP și să preluați date de pe server.

Acest tutorial pas cu pas vă va ghida prin procesul de utilizare a fetch() în React pentru a prelua date, a gestiona erorile și a face solicitări GET și POST. Deci haideți să ne scufundăm!

Ce este fetch() în React?

fetch() este o funcție JavaScript încorporată care vă permite să faceți solicitări HTTP pentru a prelua resurse de pe un server. Este un înlocuitor modern pentru obiectul tradițional XMLHttpRequest, oferind un API mai simplu și mai flexibil.

În React, fetch() poate fi utilizat în combinație cu metoda ciclului de viață componentDidMount() pentru a prelua date dintr-un API de îndată ce componenta a fost montată pe DOM. Returnează o promisiune care se rezolvă la răspunsul de la server, care poate fi apoi folosit pentru a gestiona datele preluate.

De ce să folosiți fetch() în React?

Există mai multe avantaje în utilizarea fetch() în React:

  1. Simplitate: fetch() oferă un API mai simplu și mai intuitiv în comparație cu XMLHttpRequest, făcându-l mai ușor de utilizat și de înțeles.
  2. Flexibilitate: fetch() vă permite să lucrați cu diferite tipuri de date, inclusiv JSON, text și date binare. De asemenea, vă permite să configurați diverse opțiuni de solicitare, cum ar fi anteturile și autentificarea.
  3. Compatibilitate browser: fetch() este acceptat de toate browserele moderne și nu necesită biblioteci suplimentare sau polyfills.
  4. Promise: fetch() returnează o promisiune, ceea ce facilitează gestionarea operațiunilor asincrone și gestionarea erorilor.

Acum că înțelegem beneficiile utilizării fetch(), să vedem cum să-l setăm într-o aplicație React.

Configurarea fetch() în React

Înainte de a începe să folosim fetch() în React, trebuie să ne asigurăm că proiectul nostru are dependențele necesare. Deoarece fetch() este o funcție încorporată de browser, nu este nevoie să instalăm niciun pachet suplimentar. Cu toate acestea, dacă lucrați cu un browser mai vechi, ar putea fi necesar să utilizați o completare polivalentă precum „whatwg-fetch” pentru a asigura compatibilitatea.

Odată ce dependențele sunt la locul lor, putem începe să folosim fetch() în componentele noastre React. Pentru a ilustra procesul, să creăm o componentă simplă numită „DataFetcher” care preia date dintr-un API.

import { useEffect } from 'react';
function DataFetcher () {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Handle the fetched data here
      })
      .catch(error => {
        // Handle any errors
      });
  }, []}
  
  return <div>Data Fetcher Component</div>;
}
export default DataFetcher;

În codul de mai sus, folosim funcția fetch() în cadrul metodei ciclului de viață useEffect(). Acest lucru asigură că procesul de preluare a datelor este declanșat de îndată ce componenta este montată pe DOM.

Efectuarea unei cereri GET cu fetch()

Acum că am configurat fetch() în aplicația noastră React, să vedem cum să facem o solicitare GET pentru a prelua date dintr-un API.

Pentru a face o solicitare GET, trebuie să furnizăm adresa URL a API-ului de la care dorim să obținem date. În exemplul de mai jos, vom prelua o listă de utilizatori de la punctul final „https://api.example.com/users':

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
  });

În acest fragment de cod, apelăm mai întâi fetch() cu adresa URL a punctului final API. Apoi conectăm metoda .then() pentru a gestiona răspunsul de la server. În acest caz, apelăm metoda .json() pe obiectul răspuns pentru a analiza răspunsul ca date JSON.

După aceea, putem accesa datele preluate în al doilea apel invers .then(). Aici, puteți manipula datele, puteți actualiza starea componentei sau puteți efectua orice alte acțiuni necesare.

Dacă apare o eroare în timpul procesului de preluare, metoda .catch() va fi apelată, permițându-vă să gestionați eroarea în consecință.

Gestionarea erorilor fetch()

Când utilizați fetch(), este important să gestionați orice erori care ar putea apărea în timpul procesului de preluare a datelor. Există mai multe tipuri comune de erori pe care le puteți întâlni, cum ar fi erori de rețea, erori de server sau răspunsuri API nevalide.

Pentru a gestiona erorile cu fetch(), putem folosi metoda .catch() în lanțul nostru de preluare. Metoda .catch() ne permite să prindem orice promisiuni respinse și să executăm logica necesară de gestionare a erorilor.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

În exemplul de mai sus, adăugăm o verificare simplă a erorilor în primul apel invers .then(). Dacă starea răspunsului nu este OK, lansăm o eroare folosind cuvântul cheie throw. Acest lucru va declanșa apelul invers .catch() și ne va permite să gestionăm eroarea în mod corespunzător.

Nu uitați să furnizați mesaje de eroare semnificative și să gestionați erorile în funcție de tipurile lor, pentru a oferi utilizatorilor o înțelegere clară a ceea ce a mers prost.

Efectuarea cererilor POST cu fetch()

Pe lângă preluarea datelor, fetch() poate fi folosit și pentru a trimite date către un server prin efectuarea de solicitări POST. Acesta este adesea folosit la crearea, actualizarea sau ștergerea datelor de pe server.

Pentru a face o solicitare POST cu fetch(), trebuie să transmitem opțiuni suplimentare funcției fetch(), inclusiv metoda HTTP, anteturile și datele care trebuie trimise.

Iată un exemplu despre cum să faci o solicitare POST pentru a crea un utilizator nou:

const userData = {
  name: 'John Doe',
  age: 30,
  email: '[email protected]',
};
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
  .then(response => response.json())
  .then(data => {
    // Handle the response data here
  })
  .catch(error => {
    // Handle any errors
  });

În acest exemplu, definim un obiect userData care conține datele pe care dorim să le trimitem către server. De asemenea, oferim metoda HTTP ca "POST" și setăm antetul "Content-Type" la "application/json" pentru a indica că trimitem date JSON.

Datele sunt convertite în JSON folosind JSON.stringify() înainte de a fi trimise ca body a solicitării POST.

Concluzie

În acest tutorial, am explorat procesul de utilizare a fetch() în React pentru a prelua date de pe un server. Am discutat despre beneficiile utilizării fetch(), despre cum să-l configurați într-o aplicație React și despre cum să faceți solicitări GET și POST. Am abordat, de asemenea, tratarea erorilor și am discutat diferite scenarii în care fetch() poate fi utilă.

Prin valorificarea puterii lui fetch(), puteți construi aplicații React dinamice și interactive care interacționează perfect cu API-urile și serverele de la distanță.

Nu uitați să exersați și să experimentați cu fetch() în propriile proiecte pentru a obține o înțelegere mai profundă a capacităților sale. Codare fericită!

Ti-a facut placere sa citesti asta? Vă rugăm să-l împărtășiți cu alții.

Vă rugăm să apăsați butonul 👏 de mai jos de cât mai multe ori posibil pentru a vă arăta sprijinul!

Multumesc pentru lectura. Salut!!!. Ești superb!

Partajarea este grija. Așa că Distribuie cât mai mult ;-)

Verificați „portofoliul” meu!