Inleiding tot API-oproepen met React en Axios

In deze zelfstudie leer je hoe je Axios gebruikt om gegevens op te halen en vervolgens hoe je deze kunt manipuleren en uiteindelijk op je pagina kunt weergeven met filterfunctionaliteit. Je zult leren hoe je de kaart kunt gebruiken, filteren en methodes kunt gebruiken. Bovendien gaat u een HOC (Higher-Order Component) maken om de laadstatus van de opgehaalde gegevens uit het API-eindpunt te verwerken.

Laten we beginnen met een schone React-app. Ik neem aan dat je het gebruikt create-reactie-app, en de bestandsnamen zijn in overeenstemming met de uitvoer.

We hoeven alleen de Axios-module voor deze zelfstudie te installeren.

Ga via het terminalvenster naar uw projectdirectory en typ vervolgens in npm installeer axios -save om Axios lokaal voor uw project te installeren.

De gegevens ophalen

We zullen de Random User Generator API gebruiken om willekeurige gebruikersinformatie op te halen voor gebruik in onze applicatie.

Laten we de Axios-module toevoegen aan onze applicatie door deze in ons te importeren App.js het dossier.

importeer axios van 'axios'

De Random User Generator API biedt een heleboel opties voor het maken van verschillende soorten gegevens. U kunt de documentatie raadplegen voor meer informatie, maar voor deze zelfstudie houden we het eenvoudig.

We willen tien verschillende gebruikers ophalen en we hebben alleen de naam, achternaam en een unieke ID nodig, die vereist is voor React bij het maken van lijsten met elementen. Om de oproep een beetje specifieker te maken, laten we de optie nationaliteit opnemen als een voorbeeld.

Hieronder staat de API waarvoor we zullen bellen.

Merk op dat ik de ID kaart optie geboden in de API vanwege het feit dat het soms terugkeert nul voor sommige gebruikers. Dus, om er zeker van te zijn dat er een unieke waarde voor elke gebruiker zal zijn, heb ik de geregistreerd optie in de API.

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

U kunt het kopiëren en in uw browser plakken en u zult de geretourneerde gegevens in JSON-indeling zien.

Het volgende is om een ​​API-aanroep te doen via Axios.

Allereerst, laten we een staat maken zodat we de opgehaalde gegevens kunnen opslaan.

In onze App component, voeg een klassenconstructor toe en maak vervolgens de status.

 constructor (props) super (props) this.state = gebruikers: [], winkel: []

Hier zie je gebruikers en op te slaan staten. Eén daarvan wordt gebruikt voor filterdoeleinden en wordt niet bewerkt en de andere bevat de filterresultaten die in de DOM worden weergegeven.

Ga nu door en maak het componentDidMount () levenscyclus haak.

Binnen deze lifecycle-haak halen we de gegevens op en gebruiken we de kaart methode, zullen we nieuwe tussentijdse gegevens maken die we zullen gebruiken binnen de setstate methode.

Als u het resultaat van de API-aanroep in uw browser controleert, ziet u dat dat er is eerste en laatste sleutel-waarde paren binnen de naam object, maar geen sleutel / waarde-paar voor een volledige naam. Dus we zullen combineren eerste en laatste om een ​​volledige naam in een nieuw JavaScript-object te maken. Merk op dat JSON en JavaScript Object verschillende dingen zijn, hoewel ze in principe op dezelfde manier werken.

Laten we stap voor stap gaan.

Voeg de volgende code toe aan uw App bestanddeel.

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

Wanneer u de console controleert, ziet u een objectuitvoer. Als u dit object opent, is er een ander object met de naam erin gegevens, en binnen gegevens, is er een array met de naam uitslagen.

Laten we verder veranderen 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]. naam eerst)) 

Hier bereikten we de naam van de eerste waarde binnen de resultatenreeks.

Laten we nu de ingebouwde gebruiken kaart JavaScript-methode om elk element in de array te doorlopen en een nieuwe array JavaScript-objecten met een nieuwe structuur te maken.

componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (result => ( name: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => console.log (newData))

Hier hebben we de kaart methode op json.data.results, die een array is en vervolgens elk element van de array doorverwijst als resultaat (let op het enkelvoud / meervoudsverschil). Vervolgens hebben we met behulp van het sleutel / waarde-paar van elk object in de array een ander object gemaakt met naam en ID kaart sleutel-waarde paren.

Aan het eind gebruikten we een andere dan methode om naar onze nieuwe gegevens te kunnen verwijzen. We noemden het als nieuwe data, en toen hebben we net ingelogd op de console om te kijken of alles volgens plan verliep.

Je zou een nieuwe array met objecten moeten zien naam en ID kaart paren.

De gegevens opslaan

In plaats van het resultaat bij de console te registreren, moeten we het opslaan. Om dat te doen, zullen we gebruiken setstate.

componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (result => ( name: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (users: newData, store: newData) ). catch (fout => waarschuwing (fout))

Hier hebben we in eerste instantie beide ingesteld gebruikers en op te slaan gegevens met onze nieuwe nieuwe data rangschikking.

We hebben twee variabelen nodig vanwege het feit dat we de originele gegevens moeten opslaan en nooit mogen verliezen. Door de informatie binnen de op te slaan Staat, we kunnen de gegevens filteren en vervolgens de gebruikers staat en laat het zien op de pagina. Dit wordt duidelijker wanneer we de filterfunctionaliteit implementeren.

Last but not least, we hebben toegevoegd vangst om eventuele fouten tijdens het ophalen te vangen en de fout weer te geven als een waarschuwingsbericht.

Filterfunctionaliteit

Het idee van filteren is vrij eenvoudig. We hebben onze op te slaan staat en de originele gegevens worden altijd bewaard zonder te veranderen. Dan, door de filter functie op deze staat, krijgen we alleen de overeenkomende elementen en dan toewijzen aan de gebruikers staat.

this.state.store.filter (item => item.name.toLowerCase (). includes (e.target.value.toLowerCase ()))

De filter methode vereist een functie als een argument, een functie die moet worden uitgevoerd voor elk element in de array. Hier verwijzen we elk element binnen de array naar item. Dan nemen we de naam sleutel van elk item en converteer het naar kleine letters om ervoor te zorgen dat onze filterfunctionaliteit niet gevoelig is. 

Nadat we de naam sleutel voor de item, we controleren of deze deze is omvat de zoekreeks die we hebben ingetypt. omvat is een andere ingebouwde JavaScript-methode. We geven de zoekreeks die in het invoerveld is ingevoerd als argument door aan omvat, en het retourneert als deze tekenreeks is opgenomen in de variabele waarop deze is aangeroepen. Nogmaals, we converteren de invoerreeks naar kleine letters, zodat het niet uitmaakt of u de hoofdletters of kleine letters invoert. 

Uiteindelijk retourneert de filtermethode de overeenkomende elementen. Dus nemen we eenvoudig deze elementen en slaan ze op in de gebruikers doorgeven setstate.

Hieronder vindt u de definitieve versie van de functie die we hebben gemaakt.

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

Componenten maken

Hoewel we voor dit kleine voorbeeld alles in de App component, laten we profiteren van React en een paar kleine functionele / staatloze componenten maken.

Laten we de volgende structuur toevoegen aan de geven methode van de App bestanddeel.

render () const users = this.state return ( 
 
NAMENLIJST
  this.filterNames (e) />  
 ); 

Voorlopig zullen we ons alleen concentreren op de functionaliteit. Later zal ik het CSS-bestand dat ik heb gemaakt verstrekken.

Merk op dat we de hebben searchFunc prop voor de Zoekbalk component en de gebruikersnamen prop voor de Lijst bestanddeel.

Merk op dat we de gebruikers staat in plaats van de op te slaan Geef aan dat de gegevens moeten worden weergegeven, omdat de gebruikers staat is degene die de gefilterde resultaten bevat.

De SearchBar-component

Dit onderdeel is vrij eenvoudig. Het kost alleen de filterNames fungeren als een prop en roept deze functie op wanneer het invoerveld verandert.

import Reageren vanaf 'react' const SearchBar = props => retourneren ( 
  
 ) standaardzoekBar exporteren 

De lijstcomponent

Deze zal eenvoudig de namen van de gebruikers vermelden.

import Reageren, Component van 'reageren' importeren LoadingHOC van './LoadingHOC' importeren '... /styles/main.css' const Lijst = (rekwisieten) => const gebruikersnamen = rekwisieten terugkeren ( 
 usernames.map (user => 
 User.name
) 
 ) export default LoadingHOC (lijst) 

Hier hebben we opnieuw het kaart methode om elk item in de array te krijgen en een te maken 

import Reageren, Component uit 'react' import spinner uit '... /spinner.gif' const LoadingHOC = (WrappedState) => return (klasse LoadingHOC breidt component render () uit return this.props.usernames.length == = 0 ?  :  ) exporteer standaard LoadingHOC 

body, html -webkit-font-smoothing: antialiased; marge: 0; opvulling: 0; achtergrondkleur: # f1f1f1; font-family: 'Raleway', sans-serif; -webkit-tekst-formaat-aanpassen: 100%;  body display: flex; justify-content: center; lettergrootte: 1rem / 16; margin-top: 50px;  li, ul lijststijl: geen; marge: 0; opvulling: 0;  ul margin-top: 10px;  li font-size: 0.8rem; margin-bottom: 8px; text-align: center; kleur: # 959595;  li: last-of-type margin-bottom: 50px;  .Card font-size: 1.5rem; lettertype: vet; weergave: flex; flex-richting: kolom; align-items: center; breedte: 200 px; grensradius: 10px; achtergrondkleur: wit; box-shadow: 0 5px 3px 0 #ebebeb;  .header positie: relatief; lettertypegrootte: 20px; marge: 12px 0; kleur: # 575757;  .header :: after content: "; position: absolute; left: -50%; bottom: -10px; width: 200%; height: 1px; background-color: # f1f1f1; .searchBar text-align: midden; marge: 5px 0; rand: 1px vast # c4c4c4; hoogte: 20px; kleur: # 575757; randradius: 3px; .searchBar: focus outline-width: 0; .searchBar :: placeholder color: #dadada; .isLoading margin: 30px 0; width: 150px; filter: opacity (0.3);