Introducere în apelurile API cu React și Axios

Acest tutorial vă va învăța cum să utilizați Axios pentru a prelua date și apoi cum să le manipulați și, eventual, să le afișați pe pagina dvs. cu funcții de filtrare. Veți învăța cum să utilizați harta, să filtrați și să includeți metode de-a lungul drumului. În plus, veți crea o componentă de comandă superioară (HOC) pentru a gestiona starea de încărcare a datelor preluate din punctul final al API.

Să începem cu o aplicație React curată. Presupun că o folosești Create-reacționează aplicație, iar numele de fișiere vor fi în concordanță cu rezultatele sale.

Trebuie doar să instalați modulul Axios pentru acest tutorial.

Accesați directorul de proiect prin fereastra terminalului, apoi tastați npm instalează axios -save pentru a instala Axios pentru proiectul dvs. local.

Preluarea datelor

Vom folosi API-ul generatorului de utilizatori aleatorii pentru a prelua informații aleatorii de utilizatori pentru a le utiliza în aplicația noastră.

Să adăugăm modulul Axios aplicației noastre importând-o în cadrul nostru App.js fişier.

import axios din "axios"

API Generator de Generatori Random oferă o mulțime de opțiuni pentru crearea de tipuri diferite de date. Puteți verifica documentația pentru mai multe informații, dar pentru acest tutorial, vom păstra simplu.

Vrem să aducem zece utilizatori diferiți și avem nevoie doar de nume, prenume și un ID unic, care este necesar pentru React când se creează liste de elemente. De asemenea, pentru a face apelul un pic mai specific, să includeți opțiunea de naționalitate ca exemplu.

Mai jos este API la care vom face un apel.

Rețineți că nu am folosit id opțiunea furnizată în API, datorită faptului că se întoarce uneori nul pentru unii utilizatori. Deci, doar pentru a vă asigura că va exista o valoare unică pentru fiecare utilizator, am inclus înregistrat în API.

https://randomuser.me/api/?results=10&inc=name,registered&nat=fr

Puteți să îl copiați și să îl inserați în browserul dvs. și veți vedea datele returnate în format JSON.

Acum, următorul lucru este de a face un apel API prin Axios.

Mai întâi, să creăm o stare, astfel încât să putem stoca datele preluate.

În interiorul nostru App , adăugați un constructor de clasă și apoi creați starea.

 constructor (recuzită) super (recuzită) this.state = users: [], stoca: []

Aici vedeți utilizatori și magazin state. Unul va fi folosit în scopuri de filtrare și nu va fi editat, iar celălalt va menține rezultatele filtrilor care vor fi afișate în DOM.

Acum mergeți mai departe și creați componentDidMount () Cârlig de viață.

În interiorul acestui cârlig de viață, vom prelua datele și apoi folosind Hartă , vom crea noi date intermediare pe care le vom folosi în interiorul setState metodă.

Dacă verificați rezultatul apelului API din browserul dvs., veți vedea că există primul și ultimul perechi cheie-valoare în interiorul Nume dar nu există pereche cheie-valoare pentru un nume complet. Așa că vom combina primul și ultimul pentru a crea un nume complet în interiorul unui nou obiect JavaScript. Rețineți că obiectele JSON și JavaScript sunt lucruri diferite, deși practic funcționează în același mod.

Să ne mișcăm pas cu pas.

Adăugați următorul cod la adresa dvs. App component.

componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json)

Când verificați consola, veți vedea o ieșire a obiectului. Dacă deschideți acest obiect, există un alt obiect pe care îl numiți date, și în interiorul datelor, există un numit matrice rezultate.

Să schimbăm în continuare console.log (json).

componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json.data.results [0]. numele primul)) 

Aici am ajuns la numele primei valori din matricea rezultatelor.

Acum, să folosim built-in-ul Hartă metoda de JavaScript pentru a itera prin fiecare element din interiorul matricei și a crea o nouă serie de obiecte JavaScript cu o nouă structură.

(= ((  nume: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => console.log (newData)

Aici, am sunat Hartă metoda pe json.data.results, care este o matrice și apoi trimite fiecare element al matricei ca rezultat (observați diferența singulară / plurală). Apoi, folosind perechea cheie-valoare a fiecărui obiect din interiorul matricei, am creat un alt obiect cu Nume și id perechi cheie-valoare.

În final, am folosit un altul atunci pentru a putea face referire la noile noastre date. Am menționat-o ca fiind newData, și apoi ne-am conectat la consola pentru a vedea dacă totul a mers așa cum a fost planificat.

Ar trebui să vedeți o nouă matrice cu obiectele care au Nume și id perechi.

Stocarea datelor

În loc să se înregistreze rezultatul la consolă, trebuie să-l stocăm. Pentru a face acest lucru, vom folosi setState.

(= ((  nume: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (users: newData, store: newData) ) .catch (eroare => alertă (eroare))

Aici am stabilit inițial amândouă utilizatori și magazin cu noi newData mulțime.

Avem nevoie de două variabile datorită faptului că trebuie să stocăm datele originale și nu ar trebui să o pierdem niciodată. Prin utilizarea informațiilor din interiorul magazin putem filtra datele și apoi vom popula utilizatori și afișați-o pe pagină. Acest lucru va fi mai clar atunci când vom implementa funcționalitatea de filtrare.

Nu în ultimul rând, am adăugat captură pentru a detecta eventuale erori în timpul preluării și pentru a afișa eroarea ca mesaj de alertă.

Filtrarea funcționalității

Ideea de filtrare este destul de simplă. Avem pe noi magazin stat, și păstrează întotdeauna datele originale fără a schimba. Apoi, folosind filtru în această stare, obținem numai elementele de potrivire și le atribuim apoi utilizatori stat.

acest site.state.store.filter (item => item.name.toLowerCase (). include (e.target.value.toLowerCase ()))

filtru metoda necesită o funcție ca argument, o funcție care trebuie executată pentru fiecare element din matrice. Aici se referă fiecare element din interiorul matricei ca articol. Apoi luăm Nume cheie a fiecăruia articol și convertiți-l la litere mici, pentru a face ca funcționalitatea noastră de filtrare să nu fie sensibilă la caz. 

După ce avem Nume cheie pentru articol, verificăm dacă aceasta include șirul de căutare pe care l-am scris. include este o altă metodă JavaScript construită. Transmitem șirul de căutare introdus în câmpul de introducere ca argument la include, și se întoarce dacă acest șir este inclus în variabila pe care a fost apelată. Din nou, vom transforma șirul de introducere în litere mici, astfel încât să nu conteze dacă introduceți intrări mari sau mici. 

În final, metoda de filtrare returnează elementele de potrivire. Așa că luăm pur și simplu aceste elemente și le păstrăm înăuntru utilizatori state prin setState.

Mai jos puteți găsi versiunea finală a funcției pe care am creat-o.

filterNames (e) this.setState (utilizatori: this.state.store.filter (item => item.name.toLowerCase (). include (e.target.value.toLowerCase ())))

Crearea componentelor

Deși pentru acest mic exemplu am putea pune totul în interiorul App componentă, să profităm de React și să facem câteva componente funcționale / fără stat.

Să adăugăm următoarea structură la face metodă a App component.

render () const users = retur această stare ( 
 
LISTA DE NUME
  this.filterNames (e) />  
 ); 

Pentru moment, ne vom concentra doar pe funcționalitate. Mai târziu, voi furniza fișierul CSS pe care l-am creat.

Observați că avem searchFunc propunere pentru Bara de căutare componentă și nume de utilizator propunere pentru Listă component.

Rețineți că folosim utilizatori de stat în loc de magazin state pentru a arăta datele deoarece utilizatori este cea care conține rezultatele filtrate.

Componenta SearchBar

Această componentă este destul de simplă. Este nevoie numai de filterNames funcționează ca suport și sună această funcție când se schimbă câmpul de intrare.

import Reacție de la 'react' const SearchBar = props => return ( 
  
 ) Căutarea standard pentru export 

Componenta listei

Acesta va lista pur și simplu numele utilizatorilor.

import React, Component din importul "react" LoadingHOC din './LoadingHOC' import '... /styles/main.css' const Lista = (props) => const usernames 
 usernames.map (user => 
nume de utilizator
) 
 ) export implicit LoadingHOC (listă) 

Aici, am folosit din nou Hartă pentru a obține fiecare element în matrice și a crea un element 

import React, Component de la 'react' importul spinner de la '... /spinner.gif' const LoadingHOC = (WrappedState) => return (clasa LoadingHOC extinde Component render () return this.props.usernames.length == = 0 ?  :  ) export implicit LoadingHOC 

corp, html -webkit-font-smoothing: antialiased; marja: 0; umplutura: 0; fundal-culoare: # f1f1f1; font-family: 'Raleway', sans-serif; -webkit-text-size-adjust: 100%;  corp display: flex; justify-content: centru; dimensiune font: 1rem / 16; margin-top: 50px;  li, ul list-style: nici unul; marja: 0; umplutura: 0;  ul margin-top: 10px;  li font-size: 0,8rem; margin-bottom: 8px; text-align: centru; culoare: # 959595;  li: ultimul tip margin-bottom: 50px; . Carte font-size: 1.5rem; font-weight: bold; afișaj: flex; direcție flexibilă: coloană; aliniere: centru; lățime: 200px; raza de graniță: 10 pixeli; fundal-culoare: alb; box-shadow: 0 5px 3px 0px #ebebeb;  .cap. poziție: relativă; font-size: 20px; margine: 12px 0; culoare: # 575757;  .header :: după content: "; position: absolute; left: -50%; bottom: -10px; width: 200%; height: 1px; background- color: # f1f1f1; .searchBar text-align: (de exemplu, în cazul în care nu există o limită de vârf: <0, #dadada; .isLoading margine: 30px 0; lățime: 150px; filtru: opacitate (0.3);