Axios je popularna JavaScript knjižnica koja se koristi za upućivanje HTTP zahtjeva. To je HTTP klijent temeljen na obećanjima (promise-based) koji se koristi u JavaScriptu ili s drugim JavaScript knjižnicama poput Vue.js ili React.js. Zbog svoje izomorfne prirode, Axios se može istovremeno izvoditi na klijentskoj i poslužiteljskoj strani koristeći isti kôd. Također, to je moćan alat koji se koristi zajedno s async kako bi se oblikovao API prilagođen korisniku. Iznad svega, Axios ima mogućnost automatskog prekidanja zahtjeva, što je inače teška borba.
Kako Axios radi?
Axios koristi zadane promise postavke za paralelno izvođenje u pregledniku i Node.js-u s istim kôdom. Koristeći HTTP značajku temeljenu na obećanjima, Axios izvodi CRUD operacije i šalje HTTP zahtjeve prema REST krajnjim točkama. U ovom vodiču ćemo vas provesti kroz korake konfiguriranja REST API-ja s Axiosom u Vue.js-u.
Započnimo!
Preduvjeti
Kako biste mogli dovršiti ovaj vodič, morate imati sljedeće:
- Instaliran Node.js i postavljen na vašem Ubuntu sustavu.
- Ako koristite CentOS OS, možete pratiti ovaj vodič za instalaciju Node.js-a na CentOS 8.
- Osnove JavaScripta.
Korak 1: Instalacija Axiosa
Prije nego što instaliramo Axios, važno je ažurirati repozitorije vašeg sustava kako biste izbjegli pogreške ili neuspjeh instalacije:
|
1 |
sudo apt-get update |
Zatim instalirajte Axios pomoću npm softverskog paketa:
|
1 |
npm install axios --save |
Alternativno, možete instalirati Axios pomoću yarn upravitelja paketima:
|
1 |
yarn add axios |
Nakon toga izradite Vue.js projekt i uvezite Axios u njega:
|
1 |
import axios from ‘axios’; |
U sljedećem koraku koristit ćemo axios.get() metodu za dohvaćanje zahtjeva.
Korak 2: Dohvaćanje podataka pomoću GET zahtjeva
Ovdje ćemo dohvatiti podatke pomoću GET zahtjeva. Pogledajte kako koristimo axios.get() metodu za dohvaćanje podataka izravno iz metode:
|
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: [], }; }, // Dohvaća objave kada se komponenta kreira. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON odgovori se automatski parsiraju. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Vidjet ćete async ili await verziju:
Gornji kod će dohvatiti objave s JSONPlaceholder i distribuirati podatke na neuređen način. Bilo koja vrsta pogreške/pogrešaka na koju se naiđe pojavit će se u drugom neuređenom popisu.
Korak 3: Slanje podataka pomoću POST zahtjeva
Nasuprot axios.get() metodi, sada ćemo koristiti axios.post() metodu za slanje POST zahtjeva. Pogledajte kako primijeniti axios.post() metodu za dohvaćanje podataka:
|
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: { // Šalje objave na poslužitelj kada se pozove. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Vidjet ćete async ili await verziju:
Gornji kod stvorit će polje za unos koje šalje sadržaj na JSONPlaceholder. Bilo koja vrsta pogreške na koju se naiđe pojavljuje se u drugom neuređenom popisu.
Korak 4: Postavljanje zajedničke osnovne instance
U ovom koraku stvorit ćemo zajedničku osnovnu instancu pomoću axios.create() metode. Cilj postavljanja zajedničke osnovne instance je dijeljenje osnovnog URL-a na svim instancama.
Zajednička osnovna instanca dobro dođe ako svi vaši pozivi koriste zajednički poslužitelj ili zaglavlje poput Authorization zaglavlja:
|
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}" } }) |
Napokon, sve je spremno za korištenje HTTP u vašoj komponenti:
Uz sve postavljene konfiguracije, naš http-demo.js je uspostavljen. Sada se Axios povezuje s JSONPlaceholder i Authorization zaglavljem u isto vrijeme koristeći istu bazu koda. Najbolji dio je što Axios dohvaća objave, identificira pogreške i prikazuje ih u neuređenom popisu.
Zaključak
U ovom vodiču naučili smo osnove slanja i dohvaćanja podataka pomoću Axiosa. Osim toga, stvorili smo zajedničku baznu instancu za dijeljenje zajedničkog URL-a. Međutim, ovo ne smije biti kraj vašeg učenja Axiosa. Potičemo vas da vježbate druge Axios metode za slanje POST, PUT, PATCH i DELETE zahtjeva. Zaronite u Axios dokumentaciju kako biste istražili temu i sami pokušali izraditi projekte.
Kako biste saznali više o temama vezanim uz Axios i Vue.js, pogledajte ove resurse s našeg bloga:
- Korištenje HTTP klijenta Axios u React aplikaciji: Vodič
- Korištenje Vue i Axiosa za prikaz podataka iz API-ja
Sretno kodiranje!
Komentari
Još nema komentara. Budite prvi.