Mnoho webových aplikácií čelí v určitom bode svojho vývoja potrebe prepojenia s REST API. Pre React webové aplikácie môžeme použiť Axios, ľahký HTTP klient založený na $http službe v rámci Angular.js v1.x. Funkcie sú podobné natívnemu Fetch API.
Axios je založený na sľuboch (promises), čo nám umožňuje začleniť JavaScriptové async a await pre čitateľnejší synchrónny kód. Podporuje tiež zachytávanie a rušenie požiadaviek. Okrem toho obsahuje vstavanú ochranu na strane klienta proti cross-site request forgery.
V tomto návode si ukážeme, ako použiť Axios na prístup k populárnemu JSON Placeholder API v ukážkovej React aplikácii. Viac o formáte JSON v JavaScripte sa môžete dozvedieť z tohto návodu.
Požiadavky
Na dokončenie krokov popísaných v tomto návode budete potrebovať nasledujúce komponenty:
- Správne nakonfigurovaný Ubuntu server. Tu sú kroky na nastavenie vlastného Ubuntu servera na CloudSigma.
- Nainštalovanú najnovšiu verziu Node.js. Pozrite si, ako nainštalovať Node.js na Ubuntu.
- Nový React projekt využívajúci Create React App. Užitočné bude najprv postupovať podľa tohto návodu na nastavenie React projektu pomocou Create React App.
- Základné porozumenie HTML, CSS a JavaScript.
Krok 1: Inštalácia Axios v React projekte
Axios je priamo dostupný ako npm modul. Pozrite si Axios na npm. Všetko, čo potrebujeme, je vytvoriť React projekt a nainštalovať balík Axios.
Nasledujúci príkaz npx spustí create-react-app na vytvorenie nového React projektu. Názov projektu sa použije na vytvorenie vyhradeného adresára pre projekt. Tu sme projekt pomenovali react-axios-demo. Spustite príkaz:
|
1 |
npx create-react-app react-axios-demo |
Zmeňte aktuálny adresár na novovytvorený adresár projektu:
|
1 |
cd react-axios-demo/ |
Ďalej zavolajte príkaz npm install na inštaláciu Axios. Ak nie je špecifikovaná žiadna verzia, potom npm automaticky stiahne a nainštaluje najnovšiu verziu Axios:
|
1 |
npm install axios |
Náš projekt je teraz pripravený na použitie Axios! Je čas uviesť jeho funkcie do praxe.
Krok 2: Vytvorenie požiadavky GET
V tomto kroku si ukážeme vytvorenie nového komponentu, ktorý používa Axios na odoslanie požiadavky GET.
Najprv vytvorte nový komponent PersonList, ktorý bude zobrazovať zoznam mien. Vytvorte vyhradený adresár na uloženie komponentu:
|
1 |
mkdir -pv src/components |
Ďalej vytvorte súbor PersonList.js :
|
1 |
touch PersonList.js |
Otvorte súbor v textovom editore. Pre pohodlie a čitateľnosť používame Visual Studio Code . Zadajte nasledujúci JavaScript kód:
|
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> ) } } |
Tu:
-
Importovali sme React and Axios, aby sme ich mohli oba použiť v komponente.
-
Napojíme sa na životný cyklus componentDidMount a odošleme požiadavku GET.
Môžete použiť axios.get(<url>) z koncového bodu API na získanie promise (vráti objekt odpovede). V rámci objektu odpovede sa nachádzajú požadované dáta. Tie potom priradíme k hodnote person. Môžeme tiež získať ďalšie informácie o požiadavke, ako napríklad stavový kód pod res.status alebo ďalšie informácie z res.request.
Ďalej musíme pridať náš komponent do hlavného súboru App.js. Pridajte nasledujúci kód:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Konfigurácia pre tento krok je dokončená. Teraz môžete aplikáciu spustiť a otestovať ju pomocou svojho obľúbeného prehliadača. Spustite vývojový server:
|
1 |
npm start |
Ako môžeme vidieť, výstup zobrazuje zoznam mien ľudí v náhodnom poradí:
Krok 3: Vytvorenie požiadavky POST
V tejto časti si ukážeme použitie knižnice Axios na vykonanie ďalšej metódy HTTP požiadavky s názvom POST. Na demonštráciu tohto je naším cieľom vytvoriť nový komponent v našom React projekte s názvom PersonAdd.
Vytvorte súbor PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Potom otvorte súbor v textovom editore a zadajte nasledujúci kód:
|
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> Meno osoby: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Pridať</button> </form> </div> ) } } |
V tomto kóde preberáme vstup od používateľa a odosielame (POST) obsah do API. Vo vnútri funkcie handleSubmit zabraňujeme predvolenej akcii formulára a aktualizujeme stav na základe vstupu používateľa. Pri použití POST vracia rovnaký objekt odpovede. Tento objekt môžeme použiť vo vnútri volania then. Na splnenie požiadavky POST zachytávame vstup používateľa a pridávame ho spolu s požiadavkou POST. To nám poskytne odpoveď. Odpoveď zaznamenávame pomocou console.log. Malo by to zobraziť vstup user vo formulári.
Ďalej pridajte komponent do App.js. Celý kód by mal vyzerať takto:
|
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> ) } |
Teraz je čas otestovať zmeny. Spustite vývojový server:
|
1 |
npm start |
Skontrolujte zmenu vo webovom prehliadači:
Krok 4: Vytvorenie požiadavky DELETE
V tejto časti si ukážeme odstraňovanie položiek z API pomocou axios.delete a použitím URL ako parametra. Na demonštráciu vytvorte komponent PersonRemove. Vytvorte súbor PersonRemove.js v adresári src/components:
|
1 |
touch src/components/PersonRemove.js |
Potom otvorte súbor v textovom editore a pridajte nasledujúci kód:
|
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 osoby: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Odstrániť</button> </form> </div> ) } } |
Tu objekt res poskytuje informácie o požiadavke. Potom môžeme použiť console.log po odoslaní formulára.
Ďalej implementujte komponent do 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> ) } |
Je čas znova otestovať náš kód. Spustite server:
|
1 |
npm start |
Mali by ste vidieť nový formulár, ktorý prevezme meno používateľa a odstráni ho zo zoznamu:
Step 5: Použitie základnej inštancie v Axios
Teraz budeme pracovať so základnou inštanciou Axios. Tu môžeme definovať URL a ďalšie konfiguračné prvky. Ak ju chcete implementovať, vytvorte samostatný súbor api.js:
|
1 |
touch src/api.js |
Otvorte ho v textovom editore a zadajte nasledujúci kód:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Po jeho nastavení ho môžeme použiť vo vnútri komponentu PersonRemove . Kód bude vyzerať takto:
|
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); }) } } |
Tu je http://jsonplaceholder.typicode.com/ nastavená ako základná URL. Teraz už nemusíme používať celú URL zakaždým, keď pristupujeme k endpointu API.
Krok 6: Implementácia async a await
V tejto časti sa pozrieme na to, ako implementovať async a await na prácu s prísľubmi. Kľúčové slovo await vyrieši promise a vráti value. Túto value môžeme priradiť do premennej pre pohodlnejšie použitie.
Takto bude vyzerať aktualizovaný kód PersonRemove.js:
|
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); } } |
Tu sme nahradili .then(). Akonáhle sa promise vyrieši, uložíme hodnotu do premennej response.
Na záver
V tomto návode sme preskúmali rôzne príklady použitia Axios na prácu s REST API. Kódy demonštrujú vytváranie HTTP požiadaviek a spracovanie odpovedí.
Máte záujem dozvedieť sa viac o JavaScripte? Pozrite si naše ďalšie príručky pre začiatočníkov o rôznych konceptoch a funkciách JavaScriptu, napríklad dátum a čas, manipulácia s reťazcami, triedy, a objekty.
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.