Mnoge web aplikacije suočavaju se s potrebom povezivanja s REST API-jem u nekom trenutku svog razvoja. Za React-temeljene web aplikacije, možemo koristiti Axios, lagani HTTP klijent baziran na $http usluzi unutar Angular.js v1.x. Značajke su slične JavaScriptovom izvornom Fetch API.
Axios se temelji na obećanjima, što nam omogućuje ugradnju JavaScriptovog async i await za čitljiviji sinkroni kod. Također podržava presretanje i otkazivanje zahtjeva. Štoviše, postoji ugrađena zaštita na strani klijenta od krivotvorenja zahtjeva na više stranica.
U ovom vodiču prikazat ćemo kako koristiti Axios za pristup popularnom JSON Placeholder API-ju u demo React aplikaciji. Možete saznati više o JSON formatu u JavaScriptu iz ovog vodiča.
Preduvjeti
Za dovršetak koraka prikazanih u ovom vodiču, trebat će vam sljedeće komponente:
- Ispravno konfiguriran Ubuntu poslužitelj. Evo koraka za postavljanje vlastitog Ubuntu poslužitelja na CloudSigma.
- Najnovija verzija Node.js instalirana. Pogledajte kako instalirati Node.js na Ubuntu.
- Novi React projekt koji koristi Create React App. Bit će korisno prvo pratiti i izvršiti ovaj vodič o postavljanju React projekta pomoću Create React App.
- Osnovno razumijevanje HTML, CSS, i JavaScript.
Step 1: Instalirajte Axios u React projekt
Axios je izravno dostupan kao npm modul. Pogledajte Axios na npm-u. Sve što nam treba je uspostaviti React projekt i instalirati Axios paket.
Sljedeća npx naredba pokrenut će create-react-app za stvaranje novog React projekta. Naziv projekta koristit će se za stvaranje namjenskog direktorija za projekt. Ovdje smo projekt nazvali react-axios-demo. Pokrenite naredbu:
|
1 |
npx create-react-app react-axios-demo |
Promijenite trenutni direktorij u novostvoreni direktorij projekta:
|
1 |
cd react-axios-demo/ |
Zatim pozovite npm install naredbu za instalaciju Axiosa. Ako verzija nije navedena, tada će npm automatski preuzeti i instalirati najnoviju verziju Axiosa:
|
1 |
npm install axios |
Naš projekt je sada spreman za korištenje Axiosa! Vrijeme je da njegove značajke stavimo u akciju.
Step 2: Izrada GET zahtjeva
U ovom koraku prikazat ćemo stvaranje nove komponente koja koristi Axios za slanje GET zahtjeva.
Prvo stvorite novu komponentu PersonList koja će prikazati popis imena. Stvorite namjenski direktorij za pohranu komponente:
|
1 |
mkdir -pv src/components |
Zatim stvorite datoteku PersonList.js :
|
1 |
touch PersonList.js |
Otvorite datoteku u uređivaču teksta. Koristimo Visual Studio Code radi udobnosti i čitljivosti. Unesite sljedeći JavaScript kod:
|
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> ) } } |
Ovdje:
-
Uvezli smo React i Axios kako bismo ih oboje mogli koristiti u komponenti.
-
Povezujemo se na componentDidMount životni ciklus i šaljemo GET zahtjev.
Možete koristiti axios.get(<url>) s krajnje točke API-ja kako biste dobili obećanje (vraća objekt odgovora). Unutar objekta odgovora nalaze se željeni podaci. Zatim ih dodjeljujemo vrijednosti person. Također možemo prikupiti dodatne informacije o zahtjevu, poput statusnog koda pod res.status ili dodatne informacije iz res.request.
Zatim moramo dodati našu komponentu u glavnu App.js datoteku. Dodajte sljedeći kod:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Konfiguracija je dovršena za ovaj korak. Sada možete pokrenuti aplikaciju i testirati je pomoću svog omiljenog preglednika. Pokrenite razvojni poslužitelj:
|
1 |
npm start |
Kao što možemo vidjeti, izlaz prikazuje popis imena ljudi nasumičnim redoslijedom:
Korak 3: Izrada POST zahtjeva
U ovom odjeljku prikazat ćemo korištenje Axios-a za izvođenje druge metode HTTP zahtjeva pod nazivom POST. Kako bismo to demonstrirali, naš cilj je stvoriti novu komponentu u našem React projektu pod nazivom PersonAdd.
Stvorite datoteku PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Zatim otvorite datoteku u uređivaču teksta i unesite sljedeći kod:
|
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> Ime osobe: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Dodaj</button> </form> </div> ) } } |
U ovom kodu uzimamo korisnički unos i šaljemo (POST) sadržaj na API. Unutar handleSubmit funkcije, sprječavamo zadano ponašanje obrasca i ažuriramo stanje na korisnički unos. Kada koristite POST on vraća isti objekt odgovora. Možemo koristiti taj objekt unutar then poziva. Kako bismo ispunili POST zahtjev, bilježimo korisnički unos i dodajemo ga zajedno s POST zahtjevom. To nam daje odgovor. Odgovor ispisujemo pomoću console.log. Trebao bi prikazati user unos u obrascu.
Zatim dodajte komponentu u App.js. Cijeli kod bi trebao izgledati ovako:
|
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> ) } |
Sada je vrijeme za testiranje promjena. Pokrenite razvojni poslužitelj:
|
1 |
npm start |
Provjerite promjenu u web pregledniku:
Korak 4: Izrada DELETE zahtjeva
U ovom odjeljku demonstrirat ćemo brisanje stavki iz API-ja uz pomoć axios.delete i korištenjem URL-a kao parametra. Za demonstraciju, stvorite komponentu PersonRemove. Stvorite datoteku PersonRemove.js u src/components direktoriju:
|
1 |
touch src/components/PersonRemove.js |
Nakon toga otvorite datoteku u uređivaču teksta i dodajte sljedeći kod:
|
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> ID osobe: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Obriši</button> </form> </div> ) } } |
Ovdje, res objekt nudi informacije o zahtjevu. Zatim možemo koristiti console.log nakon što se obrazac pošalje.
Zatim implementirajte komponentu u 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> ) } |
Vrijeme je da ponovno testiramo naš kod. Pokrenite poslužitelj:
|
1 |
npm start |
Trebali biste pronaći novi obrazac koji prima korisnikovo ime i uklanja ga s popisa:
Korak 5: Primijenite osnovnu instancu u Axiosu
Sada ćemo raditi s Axios osnovnom instancom. Ovdje možemo definirati URL i druge konfiguracijske elemente. Da biste to implementirali, stvorite zasebnu datoteku api.js:
|
1 |
touch src/api.js |
Otvorite je u uređivaču teksta i unesite sljedeći kod:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Nakon što je postavljeno, možemo ga koristiti unutar PersonRemove komponente. Evo kako bi kod izgledao:
|
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); }) } } |
Ovdje je http://jsonplaceholder.typicode.com/ postavljen kao osnovni URL. Sada više ne moramo koristiti puni URL svaki put kada pristupamo krajnjoj točki API-ja.
Korak 6: Implementirajte async i await
U ovom odjeljku pogledat ćemo kako implementirati async i await za rad s obećanjima. Ključna riječ await razrješava promise i vraća vrijednost. Možemo dodijeliti ovu vrijednost varijabli radi lakšeg korištenja.
Evo kako bi ažurirani kod za PersonRemove.js izgledao:
|
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); } } |
Ovdje smo zamijenili .then(). Nakon što se promise razriješi, spremamo vrijednost u varijablu response.
Završne misli
U ovom smo vodiču istražili različite primjere korištenja Axiosa za rad s REST API-jem. Kodovi prikazuju stvaranje HTTP zahtjeva i rukovanje odgovorima.
Zanima vas učenje o JavaScriptu? Pogledajte naše ostale vodiče za početnike o različitim konceptima i značajkama JavaScripta, na primjer, datum i vrijeme, manipulacija stringovima, klase, i objekti.
Sretno kodiranje!
Komentari
Još nema komentara. Budite prvi.