Axios je populárna JavaScriptová knižnica používaná na odosielanie HTTP požiadaviek. Je to HTTP klient založený na sľuboch (promises) používaný v JavaScripte alebo s inými JavaScriptovými knižnicami ako Vue.js alebo React.js. Vďaka svojej izomorfnej povahe môže Axios bežať na strane klienta aj servera súčasne s použitím rovnakej bázy kódu. Taktiež je to výkonný nástroj používaný spoločne s async na vytvorenie používateľsky prívetivého API. Axios má predovšetkým schopnosť automaticky zrušiť požiadavku, čo je inak náročná úloha.
Ako Axios funguje?
Axios používa predvolené promise nastavenia na paralelné spustenie v prehliadači a Node.js s rovnakým kódom. Pomocou funkcie HTTP založenej na sľuboch vykonáva Axios CRUD operácie a odosiela HTTP požiadavky na REST koncové body. V tomto návode vás prevedieme krokmi konfigurácie REST API pomocou Axios vo Vue.js.
Začnime!
Požiadavky
Na dokončenie tohto návodu musíte mať nasledujúce:
- Nainštalovaný Node.js a nastavený vo vašom systéme Ubuntu.
- Ak používate operačný systém CentOS, môžete postupovať podľa tohto návodu na inštaláciu Node.js na CentOS 8.
- Základy JavaScriptu.
Krok 1: Inštalácia Axios
Pred inštaláciou Axios je dôležité aktualizovať systémové repozitáre, aby ste predišli chybám alebo zlyhaniu inštalácie:
|
1 |
sudo apt-get update |
Ďalej nainštalujte Axios pomocou softvérového balíka npm :
|
1 |
npm install axios --save |
Prípadne môžete Axios nainštalovať pomocou správcu balíkov yarn :
|
1 |
yarn add axios |
Potom vytvorte projekt Vue.js a importujte doň Axios:
|
1 |
import axios from ‘axios’; |
V ďalšom kroku použijeme metódu axios.get() na načítanie požiadaviek.
Krok 2: Načítanie dát pomocou požiadavky GET
Tu budeme načítavať dáta pomocou požiadavky GET . Pozrite sa, ako používame metódu axios.get() na načítanie dát priamo z metódy:
|
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číta príspevky pri vytvorení komponentu. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON odpovede sú automaticky analyzované. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Uvidíte async alebo await verziu:
Vyššie uvedený kód načíta príspevky z JSONPlaceholder a zobrazí dáta v neusporiadanom zozname. Akýkoľvek typ chýb, ktoré sa vyskytnú, by sa zobrazil v inom neusporiadanom zozname.
Krok 3: Odoslanie dát pomocou požiadavky POST
Na rozdiel od metódy axios.get(), teraz použijeme metódu axios.post() na vytvorenie požiadavky POST. Pozrite sa, ako použiť metódu axios.post() na načítanie dát:
|
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: { // Pri volaní odošle príspevky 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 alebo await verziu:
Vyššie uvedený kód vytvorí vstupné pole, ktoré odosiela obsah na JSONPlaceholder. Akýkoľvek typ chyby/chýb, s ktorými sa stretnete, sa zobrazí v inom neusporiadanom zozname.
Krok 4: Nastavenie spoločnej základnej inštancie
V tomto kroku vytvoríme spoločnú základnú inštanciu pomocou axios.create() metódy. Cieľom nastavenia spoločnej základnej inštancie je zdieľať základnú URL adresu naprieč všetkými inštanciami.
Spoločná základná inštancia sa hodí, ak všetky vaše volania používajú spoločný server alebo hlavičku ako 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}" } }) |
Nakoniec ste pripravení použiť HTTP vo vašom komponente:
Po nastavení všetkých konfigurácií je naše http-demo.js vytvorené. Teraz sa Axios pripája k JSONPlaceholder a Authorization hlavičke súčasne s použitím rovnakej bázy kódu. Najlepšie na tom je, že Axios načíta posts, identifikuje chyby a zobrazí ich v neusporiadanom zozname.
Záver
V tomto návode sme sa naučili základy odosielania a získavania údajov pomocou Axiosu. Okrem toho sme vytvorili spoločnú základnú inštanciu na zdieľanie spoločnej URL adresy. Týmto by sa však vaše učenie Axiosu nemalo skončiť. Odporúčame vám precvičiť si ďalšie metódy Axios na odosielanie POST, PUT, PATCH a DELETE požiadaviek. Ponorte sa do dokumentácie Axios, aby ste preskúmali túto tému a skúsili si sami vytvoriť projekty.
Ak sa chcete dozvedieť viac o témach Axios a Vue.js, pozrite si tieto zdroje z nášho blogu:
- Použitie HTTP klienta Axios v aplikácii React: Návod
- Použitie Vue a Axios na zobrazenie údajov z API
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.