Veel web-apps worden op een bepaald moment in hun ontwikkeling geconfronteerd met de noodzaak om te communiceren met een REST API. Voor React-gebaseerde web-apps kunnen we Axios, een lichtgewicht HTTP-client gebaseerd op de $http-service binnen Angular.js v1.x. De functies zijn vergelijkbaar met de native Fetch API.
van JavaScript. Axios is gebaseerd op promises, wat ons de mogelijkheid geeft om JavaScripts async en await te integreren voor beter leesbare synchrone code. Het ondersteunt ook interceptie en het annuleren van verzoeken. Bovendien is er ingebouwde bescherming aan de clientzijde tegen cross-site request forgery.
In deze handleiding laten we zien hoe je Axios gebruikt om toegang te krijgen tot de populaire JSON Placeholder API in een demo React-applicatie. Je kunt meer leren over het JSON-formaat in JavaScript in deze tutorial.
Vereisten
Om de stappen in deze handleiding te voltooien, heb je de volgende componenten nodig:
- Een correct geconfigureerde Ubuntu server. Hier zijn de stappen voor het opzetten van je eigen Ubuntu-server op CloudSigma.
- De nieuwste versie van Node.js geïnstalleerd. Bekijk hoe je Node.js installeert op Ubuntu.
- Een nieuw React-project met behulp van Create React App. Het is handig om eerst deze handleiding over het opzetten van een React-project met Create React App.
- Basisbegrip van HTML, CSS, en JavaScript.
Stap 1: Installeer Axios in het React-project
Axios is direct beschikbaar als een npm module. Bekijk Axios op npm. Het enige wat we hoeven te doen is een React-project op te zetten en het Axios-pakket te installeren.
Het volgende npx commando zal create-react-app uitvoeren om een nieuw React-project aan te maken. De projectnaam zal worden gebruikt om een specifieke map voor het project aan te maken. Hier hebben we het project react-axios-demo genoemd. Voer het commando uit:
|
1 |
npx create-react-app react-axios-demo |
Wijzig de huidige map naar de nieuw aangemaakte projectmap:
|
1 |
cd react-axios-demo/ |
Roep vervolgens het npm install commando aan om Axios te installeren. Als er geen versie is gespecificeerd, zal npm automatisch de nieuwste versie van Axios downloaden en installeren:
|
1 |
npm install axios |
Ons project is nu klaar om Axios te gebruiken! Het is tijd om de functies in de praktijk te brengen.
Stap 2: Bouw een GET-verzoek
In deze stap laten we zien hoe je een nieuwe component maakt die Axios gebruikt om een GET -verzoek te verzenden.
Maak eerst een nieuwe component PersonList die een lijst met namen zal tonen. Maak een specifieke map aan om de component in op te slaan:
|
1 |
mkdir -pv src/components |
Maak vervolgens het bestand PersonList.js :
|
1 |
touch PersonList.js |
Open het bestand in een tekst-editor. We gebruiken Visual Studio Code voor comfort en leesbaarheid. Voer de volgende JavaScript-code in:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Hier:
-
We hebben React en Axios geïmporteerd, zodat we ze allebei in de component kunnen gebruiken.
-
We haken in op de componentDidMount lifecycle-hook en verzenden een GET-verzoek.
Je kunt axios.get(<url>) van een API-eindpunt gebruiken om een promise te krijgen (die een responsobject retourneert). Binnen het responsobject bevindt zich de gewenste data. Deze wijzen we vervolgens toe aan de waarde van person. We kunnen ook aanvullende informatie over het verzoek verzamelen, zoals de statuscode onder res.status of verdere informatie van res.request.
Vervolgens moeten we onze component toevoegen aan het hoofd- App.js-bestand. Voeg de volgende code toe:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
De configuratie is voltooid voor deze stap. Je kunt de app nu uitvoeren en testen met je favoriete browser. Start de ontwikkelingsserver:
|
1 |
npm start |
Zoals we kunnen zien, toont de uitvoer een lijst met namen van mensen in willekeurige volgorde:
Step 3: Een POST-verzoek opbouwen
In dit gedeelte laten we zien hoe je Axios gebruikt om een andere HTTP-verzoekmethode uit te voeren, genaamd POST. Om dit te demonstreren, is ons doel om een nieuwe component aan ons React-project toe te voegen met de naam PersonAdd.
Maak het bestand PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Open vervolgens het bestand in een teksteditor en voer de volgende code in:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Naam persoon: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Toevoegen</button> </form> </div> ) } } |
In deze code nemen we gebruikersinvoer en POSTen we de inhoud naar een API. Binnen de handleSubmit-functie voorkomen we de standaardactie van het formulier en updaten we de state naar de gebruikersinvoer. Bij het gebruik van POST retourneert het hetzelfde responsobject. We kunnen het object gebruiken binnen een then-aanroep. Om te voldoen aan het POST-verzoek, leggen we de gebruikersinvoer vast en voegen deze toe samen met het POST-verzoek. Dit geeft ons een respons. We loggen de respons met behulp van console.log. Dit zou de user-invoer in het formulier moeten tonen.
Voeg vervolgens de component toe aan App.js. De volledige code zou er als volgt uit moeten zien:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Nu is het tijd om de wijzigingen te testen. Start de ontwikkelingsserver:
|
1 |
npm start |
Controleer de wijziging in de webbrowser:
Step 4: Een DELETE-verzoek opbouwen
In dit gedeelte demonstreren we het verwijderen van items uit een API met behulp van axios.delete en het gebruik van een URL als parameter. Maak ter demonstratie de component PersonRemove. Maak het bestand PersonRemove.js in de src/components-directory:
|
1 |
touch src/components/PersonRemove.js |
Open daarna het bestand in een teksteditor en voeg de volgende code toe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Persoon ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Verwijderen</button> </form> </div> ) } } |
Hier biedt het res-object de informatie over het verzoek. We kunnen vervolgens console.log gebruiken nadat het formulier is verzonden.
Implementeer vervolgens het component in App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Tijd om onze code opnieuw te testen. Start the server:
|
1 |
npm start |
Je zou een nieuw formulier moeten zien dat de naam van de gebruiker vraagt en deze uit de lijst verwijdert:
Stap 5: Basisinstantie toepassen in Axios
Nu gaan we werken met de Axios-basisinstantie. Hier kunnen we een URL en andere configuratie-elementen definiëren. Om dit te implementeren, maak je een apart bestand api.js:
|
1 |
touch src/api.js |
Open het in een teksteditor en voer de volgende code in:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Zodra dit is ingesteld, kunnen we het gebruiken in het PersonRemove-component. Dit is hoe de code eruit zou zien:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Hier is http://jsonplaceholder.typicode.com/ ingesteld als de basis-URL. Nu hoeven we niet langer de volledige URL te gebruiken telkens wanneer we een eindpunt van de API aanroepen.
Stap 6: Async en await implementeren
In dit gedeelte bekijken we hoe we async en await kunnen implementeren om met promises te werken. Het await-trefwoord lost de promise op en retourneert de waarde. We kunnen deze waarde toewijzen aan een variabele voor eenvoudiger gebruik.
Dit is hoe de bijgewerkte code van PersonRemove.js eruit zou zien:
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Hier hebben we .then() vervangen. Zodra promise is opgelost, slaan we de waarde op in de variabele response.
Tot slot
In deze handleiding hebben we verschillende voorbeelden bekeken van het gebruik van Axios om met een REST API te werken. De code laat zien hoe je HTTP-verzoeken maakt en antwoorden verwerkt.
Geïnteresseerd om meer te leren over JavaScript? Bekijk onze andere handleidingen voor beginners over verschillende JavaScript-concepten en -functies, bijvoorbeeld datum en tijd, stringmanipulatie, klassen, en objecten.
Veel programmeerplezier!
Reacties
Nog geen reacties. Wees de eerste.