Axios je populární JavaScriptová knihovna používaná k provádění HTTP požadavků. Je to HTTP klient založený na promisech používaný v JavaScriptu nebo s jinými JavaScriptovými knihovnami, jako je Vue.js nebo React.js. Díky své izomorfní povaze může Axios běžet na straně klienta i serveru současně s použitím stejného kódu. Je to také výkonný nástroj používaný společně s async k vytvoření uživatelsky přívětivého API. Axios má především schopnost automaticky zrušit požadavek, což je jinak nelehký úkol.
Jak Axios funguje?
Axios používá výchozí promise nastavení pro paralelní běh v prohlížeči a Node.js se stejným kódem. Pomocí funkce HTTP založené na promisech provádí Axios CRUD operace a odesílá HTTP požadavky na REST koncové body. V tomto návodu vás provedeme kroky konfigurace REST API s Axios ve Vue.js.
Začněme!
Požadavky
Abyste mohli tento návod dokončit, musíte mít následující:
- Nainstalovaný Node.js a nastavený na vašem systému Ubuntu.
- Pokud používáte operační systém CentOS, můžete postupovat podle tohoto návodu k instalaci Node.js na CentOS 8.
- Základy JavaScriptu.
Krok 1: Instalace Axios
Před instalací Axios je důležité aktualizovat systémové repozitáře, abyste předešli chybám nebo selhání instalace:
|
1 |
sudo apt-get update |
Dále nainstalujte Axios pomocí npm softwarového balíčku:
|
1 |
npm install axios --save |
Případně můžete Axios nainstalovat pomocí yarn správce balíčků:
|
1 |
yarn add axios |
Poté vytvořte projekt Vue.js a importujte do něj Axios:
|
1 |
import axios from ‘axios’; |
V dalším kroku použijeme metodu axios.get() k načtení požadavků.
Krok 2: Načtení dat pomocí požadavku GET
Zde budeme načítat data pomocí požadavku GET . Podívejte se, jak používáme metodu axios.get() k načtení dat přímo z metody:
|
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 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Načte příspěvky při vytvoření komponenty. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Odpovědi JSON jsou automaticky parsovány. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Uvidíte async nebo await verzi:
Výše uvedený kód načte příspěvky z JSONPlaceholder a uspořádá data do neuspořádaného seznamu. Jakékoli chyby, na které narazíte, se zobrazí v jiném neuspořádaném seznamu.
Step 3: Push Data Using POST Request
Na rozdíl od metody axios.get() nyní použijeme metodu axios.post() k provedení požadavku POST. Podívejte se, jak použít metodu axios.post() k odeslání dat:
|
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 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Při volání odešle příspěvky na server. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Uvidíte async nebo await verzi:
Výše uvedený kód vytvoří vstupní pole, které odešle obsah do JSONPlaceholder. Jakékoli případné chyby se zobrazí v jiném neuspořádaném seznamu.
Krok 4: Nastavení společné základní instance
V tomto kroku vytvoříme společnou základní instanci pomocí metody axios.create() . Cílem nastavení společné základní instance je sdílet základní URL napříč všemi instancemi.
Společná základní instance se hodí, pokud všechna vaše volání používají společný server nebo hlavičku jako Authorization hlavičku:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Nakonec je vše připraveno k použití HTTP ve vaší komponentě:
Po dokončení veškeré konfigurace je naše http-demo.js vytvořeno. Nyní se Axios připojí k JSONPlaceholder a Authorization hlavičce zároveň pomocí stejného kódu. Nejlepší na tom je, že Axios načte příspěvky, identifikuje chyby a zobrazí je v neuspořádaném seznamu.
Závěr
V tomto návodu jsme se naučili základy odesílání a stahování dat pomocí knihovny Axios. Kromě toho jsme vytvořili společnou základní instanci pro sdílení společné URL. Tím by však vaše učení Axiosu nemělo skončit. Doporučujeme vám procvičit si další metody Axios pro odesílání POST, PUT, PATCH a DELETE požadavků. Ponořte se do dokumentace k Axiosu, abyste prozkoumali toto téma a zkusili si sami vytvořit nějaké projekty.
Chcete-li se o tématech Axios a Vue.js dozvědět více, podívejte se na tyto zdroje z našeho blogu:
Příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.