Mnoho webových aplikací čelí v určitém okamžiku svého vývoje nutnosti propojení s REST API. Pro React-ové webové aplikace můžeme použít Axios, lehkého HTTP klienta založeného na $http službě v rámci Angular.js v1.x. Funkce jsou podobné nativnímu Fetch API.
Axios je založen na promisech, což nám umožňuje začlenit JavaScriptové async a await pro čitelnější synchronní kód. Podporuje také zachytávání a rušení požadavků. Navíc je k dispozici vestavěná ochrana na straně klienta proti cross-site request forgery.
V této příručce si ukážeme, jak použít Axios pro přístup k populárnímu JSON Placeholder API v ukázkové aplikaci React. Více se o formátu JSON v JavaScriptu dozvíte v tomto návodu.
Požadavky
K dokončení kroků popsaných v této příručce budete potřebovat následující komponenty:
- Správně nakonfigurovaný Ubuntu server. Zde jsou kroky pro nastavení vlastního serveru Ubuntu na CloudSigma.
- Nejnovější verzi Node.js nainstalovanou. Podívejte se na jak nainstalovat Node.js na Ubuntu.
- Nový projekt React využívající Create React App. Bude užitečné nejprve projít a provést tento návod na nastavení projektu React pomocí Create React App.
- Základní znalost HTML, CSS, a JavaScript.
Krok 1: Instalace Axios v projektu React
Axios je přímo dostupný jako npm modul. Podívejte se na Axios na npm. Vše, co potřebujeme, je vytvořit projekt React a nainstalovat balíček Axios.
Následující příkaz npx spustí create-react-app pro vytvoření nového projektu React. Název projektu bude použit k vytvoření vyhrazeného adresáře pro projekt. Zde jsme projekt pojmenovali react-axios-demo. Spusťte příkaz:
|
1 |
npx create-react-app react-axios-demo |
Změňte aktuální adresář na nově vytvořený adresář projektu:
|
1 |
cd react-axios-demo/ |
Dále spusťte příkaz npm install pro instalaci Axios. Pokud není specifikována žádná verze, pak npm automaticky stáhne a nainstaluje nejnovější verzi Axios:
|
1 |
npm install axios |
Náš projekt je nyní připraven k použití Axios! Je čas uvést jeho funkce do praxe.
Krok 2: Sestavení požadavku GET
V tomto kroku si ukážeme vytvoření nové komponenty, která používá Axios k odeslání požadavku GET request.
Nejprve vytvořte novou komponentu PersonList, která bude zobrazovat seznam jmen. Vytvořte vyhrazený adresář pro uložení komponenty:
|
1 |
mkdir -pv src/components |
Dále vytvořte soubor PersonList.js :
|
1 |
touch PersonList.js |
Otevřete soubor v textovém editoru. Pro pohodlí a čitelnost používáme Visual Studio Code. Zadejte následující kód JavaScriptu:
|
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> ) } } |
Zde:
-
Importovali jsme React and Axios, abychom je mohli oba v komponentě použít.
-
Připojíme se k životnímu cyklu componentDidMount a odešleme požadavek GET.
Můžete použít axios.get(<url>) z koncového bodu API pro získání promise (vrací objekt odpovědi). V rámci objektu odpovědi jsou obsažena požadovaná data. Ty pak přiřadíme k hodnotě person. Můžeme také získat další informace o požadavku, jako je stavový kód pod res.status nebo další informace z res.request.
Dále musíme přidat naši komponentu do hlavního App.js souboru. Přidejte následující 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> ) } |
Konfigurace pro tento krok je dokončena. Nyní můžete aplikaci spustit a otestovat ji ve svém oblíbeném prohlížeči. Spusťte vývojový server:
|
1 |
npm start |
Jak vidíme, výstup zobrazuje seznam jmen lidí v náhodném pořadí:
Krok 3: Sestavení požadavku POST
V této části si ukážeme použití knihovny Axios k provedení další metody HTTP požadavku s názvem POST. Abychom to demonstrovali, naším cílem je vytvořit v našem projektu React novou komponentu s názvem PersonAdd.
Vytvořte soubor PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Poté otevřete soubor v textovém editoru a zadejte následující 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> Jméno osoby: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Přidat</button> </form> </div> ) } } |
V tomto kódu přijímáme vstup od uživatele a odesíláme (POST) obsah do API. Uvnitř funkce handleSubmit zabraňujeme výchozí akci formuláře a aktualizujeme stav podle vstupu uživatele. Při použití POST vrací stejný objekt odpovědi. Tento objekt můžeme použít uvnitř volání then. Pro splnění požadavku POST zachycujeme vstup uživatele a přidáváme jej spolu s požadavkem POST. To nám dává odpověď. Odpověď zaznamenáváme pomocí console.log. Mělo by to zobrazit vstup user ve formuláři.
Dále přidejte komponentu do App.js. Celý kód by měl vypadat 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> ) } |
Nyní je čas otestovat změny. Spusťte vývojový server:
|
1 |
npm start |
Zkontrolujte změnu ve webovém prohlížeči:
Krok 4: Sestavení požadavku DELETE
V této části si ukážeme mazání položek z API pomocí axios.delete a použitím URL jako parametru. Pro demonstraci vytvořte komponentu PersonRemove. Vytvořte soubor PersonRemove.js v adresáři src/components:
|
1 |
touch src/components/PersonRemove.js |
Poté otevřete soubor v textovém editoru a přidejte následující 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">Smazat</button> </form> </div> ) } } |
Zde objekt res nabízí informace o požadavku. Poté můžeme použít console.log po odeslání formuláře.
Dále implementujte komponentu 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 znovu otestovat náš kód. Spusťte server:
|
1 |
npm start |
Měli byste vidět nový formulář, který přijímá jméno uživatele a odstraní ho ze seznamu:
Krok 5: Použití základní instance v Axios
Nyní budeme pracovat se základní instancí Axios. Zde můžeme definovat URL a další konfigurační prvky. Chcete-li ji implementovat, vytvořte samostatný soubor api.js:
|
1 |
touch src/api.js |
Otevřete jej v textovém editoru a zadejte následující kód:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Jakmile je nastaven, můžeme jej použít uvnitř komponenty PersonRemove. Kód bude vypadat následovně:
|
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); }) } } |
Zde je http://jsonplaceholder.typicode.com/ nastaveno jako základní URL. Nyní již nemusíme používat celou URL pokaždé, když přistupujeme k endpointu API.
Krok 6: Implementace async a await
V této části se podíváme na to, jak implementovat async a await pro práci s promisy. Klíčové slovo await vyhodnotí promise a vrátí hodnotu. Tuto hodnotu do proměnné pro pohodlnější použití.
Zde je ukázka toho, jak bude vypadat 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); } } |
Zde jsme nahradili .then(). Jakmile je promise vyřešen, uložíme hodnotu do proměnné response.
Závěr
V tomto návodu jsme prozkoumali různé příklady použití Axios pro práci s REST API. Kódy ukazují vytváření HTTP požadavků a zpracování odpovědí.
Máte zájem dozvědět se více o JavaScriptu? Podívejte se na naše další průvodce pro začátečníky o různých konceptech a funkcích JavaScriptu, například na datum a čas, manipulaci s řetězci, třídy, a objekty.
Příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.