Axios egy népszerű JavaScript könyvtár, amelyet HTTP-kérések indítására használnak. Ez egy promise-alapú HTTP-kliens, amelyet JavaScriptben vagy más Javascript könyvtárakkal, például Vue.js-szel vagy React.js-szel használnak. Az izomorf természetének köszönhetően az Axios egyszerre futhat a kliens- és a szerveroldalon, ugyanazt a kódbázist használva. Emellett egy hatékony eszköz, amelyet az async segítségével egy felhasználóbarát API-t hozhatunk létre. Mindenekelőtt az Axios képes automatikusan megszakítani egy kérést, ami egyébként komoly kihívást jelentene.
Hogyan működik az Axios?
Az Axios az alapértelmezett promise beállításokat használja, hogy párhuzamosan fusson a böngészőben és a Node.js-ben ugyanazzal a kóddal. A promise-alapú HTTP funkciót használva az Axios CRUD műveleteket hajt végre, és HTTP-kéréseket küld a REST végpontokra. Ebben az útmutatóban lépésről lépésre bemutatjuk, hogyan konfigurálhat egy REST API-t az Axios segítségével Vue.js-ben.
Kezdjük el!
Előfeltételek
Az útmutató elvégzéséhez a következőkre lesz szüksége:
- Telepített Node.js és annak beállítása az Ubuntu rendszerén.
- Ha Centos operációs rendszert használ, kövesse ezt az útmutatót a Node.js telepítéséhez Centos 8 rendszerre.
- A JavaScript.
1. lépés: Az Axios telepítése
Az Axios telepítése előtt fontos frissíteni a rendszer tárolóit a hibák vagy a sikertelen telepítés elkerülése érdekében:
|
1 |
sudo apt-get update |
Ezután telepítse az Axiost az npm szoftvercsomag segítségével:
|
1 |
npm install axios --save |
Alternatív megoldásként telepítheti az Axiost a yarn csomagkezelővel is:
|
1 |
yarn add axios |
Ezt követően hozzon létre egy Vue.js projektet, és importálja bele az Axiost:
|
1 |
import axios from ‘axios’; |
A következő lépésben az axios.get() metódust fogjuk használni a kérések lekéréséhez.
2. lépés: Adatok lekérése GET kéréssel
Itt egy GET kéréssel fogunk adatokat lekérni. Nézze meg, hogyan használjuk az axios.get() metódust az adatok közvetlen lekérésére egy metódusból:
|
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: [], }; }, // Lekéri a bejegyzéseket a komponens létrehozásakor. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // A JSON válaszok automatikusan feldolgozásra kerülnek. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Látni fogja az async vagy await verziót:
A fenti kód lekéri a bejegyzéseket a JSONPlaceholder helyről, és rendezetlen módon osztja el az adatokat. Bármilyen felmerülő hiba egy másik rendezetlen listában jelenik meg.
3. lépés: Adatok küldése POST kéréssel
Az axios.get() metódussal ellentétben most az axios.post() metódust fogjuk használni egy POST kérés indításához. Nézze meg, hogyan kell alkalmazni az axios.post() metódust az adatok lekéréséhez:
|
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: { // Elküldi a bejegyzéseket a szerverre, amikor meghívják. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Látni fogod az async vagy await verziót:
A fenti kód létrehoz egy beviteli mezőt, amely elküldi a tartalmat a JSONPlaceholder. Bármilyen felmerülő hiba egy külön rendezetlen listában jelenik meg.
4. lépés: Közös bázispéldány beállítása
Ebben a lépésben egy közös bázispéldányt fogunk létrehozni az axios.create() metódus használatával. A közös bázispéldány beállításának célja, hogy megosszuk az alap URL-t az összes példány között.
A közös bázispéldány jól jön, ha az összes hívás egy közös szervert vagy fejlécet használ, mint például az Authorization fejléc:
|
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}" } }) |
Végül minden készen áll a HTTP használatára a komponensben:
A konfiguráció beállítása után a http-demo.js létrejött. Most az Axios egyszerre kapcsolódik a JSONPlaceholder és az Authorization fejléchez, ugyanazt a kódbázist használva. A legjobb rész az, hogy az Axios lekéri a posts, azonosítja a hibákat, és megjeleníti őket egy rendezetlen listában.
Összegzés
Ebben az útmutatóban megtanultuk az adatok lekérésének és küldésének alapjait az Axios használatával. Emellett létrehoztunk egy közös bázispéldányt egy közös URL megosztásához. Azonban az Axios tanulásodnak nem kell itt véget érnie. Arra bátorítunk, hogy gyakorolj más Axios metódusokat is, hogy elküldj POST, PUT, PATCH és DELETE kéréseket. Merülj el az Axios dokumentációjában, hogy felfedezd a témát, és próbálj meg önállóan projekteket építeni.
Ha szeretnél többet megtudni az Axios és Vue.js témakörökről, tekintsd meg ezeket a forrásokat a blogunkról:
- Az Axios HTTP-kliens használata React alkalmazásban: Útmutató
- Adatok megjelenítése API-ból Vue és Axios használatával
Kellemes kódolást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.