Axios είναι μια δημοφιλής βιβλιοθήκη JavaScript που χρησιμοποιείται για την πραγματοποίηση αιτημάτων HTTP. Είναι ένας HTTP client βασισμένος σε promises που χρησιμοποιείται στη JavaScript ή με άλλες βιβλιοθήκες Javascript όπως το Vue.js ή το React.js. Λόγω της ισομορφικής φύσης του, το Axios μπορεί να εκτελεστεί ταυτόχρονα στην πλευρά του πελάτη και του διακομιστή χρησιμοποιώντας την ίδια βάση κώδικα. Επίσης, είναι ένα ισχυρό εργαλείο που χρησιμοποιείται συλλογικά με async για τη διαμόρφωση ενός φιλικού προς τον χρήστη API. Πάνω απ' όλα, το Axios έχει τη δυνατότητα να ακυρώνει αυτόματα ένα αίτημα, κάτι που διαφορετικά θα ήταν εξαιρετικά δύσκολο.
Πώς λειτουργεί το Axios;
Το Axios χρησιμοποιεί τις προεπιλεγμένες promise ρυθμίσεις για να εκτελείται παράλληλα στο πρόγραμμα περιήγησης και στο Node.js με τον ίδιο κώδικα. Χρησιμοποιώντας τη δυνατότητα HTTP που βασίζεται σε promises, το Axios εκτελεί CRUD λειτουργίες και στέλνει αιτήματα HTTP σε REST endpoints. Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε στα βήματα ρύθμισης ενός REST API με το Axios στο Vue.js.
Ας ξεκινήσουμε!
Προαπαιτούμενα
Για να μπορέσετε να ολοκληρώσετε αυτόν τον οδηγό, πρέπει να έχετε τα εξής:
- Εγκατεστημένο το Node.js και ρυθμισμένο στο σύστημα Ubuntu σας.
- Αν χρησιμοποιείτε λειτουργικό σύστημα Centos, μπορείτε να ακολουθήσετε αυτόν τον οδηγό για να εγκαταστήσετε το Node.js στο Centos 8.
- Βασικές γνώσεις JavaScript.
Βήμα 1: Εγκατάσταση του Axios
Πριν εγκαταστήσουμε το Axios, είναι σημαντικό να ενημερώσετε τα αποθετήρια του συστήματός σας για να αποφύγετε σφάλματα ή αποτυχία εγκατάστασης:
|
1 |
sudo apt-get update |
Στη συνέχεια, εγκαταστήστε το Axios χρησιμοποιώντας το πακέτο λογισμικού npm :
|
1 |
npm install axios --save |
Εναλλακτικά, μπορείτε να εγκαταστήσετε το Axios χρησιμοποιώντας τον διαχειριστή πακέτων yarn :
|
1 |
yarn add axios |
Μετά από αυτό, δημιουργήστε ένα έργο Vue.js και εισαγάγετε το Axios σε αυτό:
|
1 |
import axios from ‘axios’; |
Στο επόμενο βήμα, θα χρησιμοποιήσουμε τη μέθοδο axios.get() για τη λήψη αιτημάτων.
Βήμα 2: Λήψη δεδομένων με χρήση αιτήματος GET
Εδώ, πρόκειται να λάβουμε δεδομένα χρησιμοποιώντας ένα αίτημα GET . Δείτε πώς χρησιμοποιούμε τη μέθοδο axios.get() για να ανακτήσουμε δεδομένα απευθείας από μια μέθοδο:
|
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: [], }; }, // Αντλεί δημοσιεύσεις όταν δημιουργείται το component. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Οι απαντήσεις JSON αναλύονται αυτόματα. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Θα δείτε την async ή await έκδοση:
Ο παραπάνω κώδικας θα ανακτήσει δημοσιεύσεις από το JSONPlaceholder και θα διανείμει τα δεδομένα με μη ταξινομημένο τρόπο. Οποιοσδήποτε τύπος σφάλματος/σφαλμάτων προκύψει θα εμφανιστεί σε μια διαφορετική μη ταξινομημένη λίστα.
Βήμα 3: Προώθηση δεδομένων με χρήση αιτήματος POST
Σε αντίθεση με τη axios.get() μέθοδο, τώρα θα χρησιμοποιήσουμε τη axios.post() μέθοδο για να κάνουμε ένα POST αίτημα. Δείτε πώς να εφαρμόσετε τη axios.post() μέθοδο για την άντληση δεδομένων:
|
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: { // Προωθεί τις δημοσιεύσεις (Posts) στον διακομιστή όταν καλείται. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Θα δείτε την έκδοση async ή await :
Ο παραπάνω κώδικας θα δημιουργήσει ένα πεδίο εισαγωγής που υποβάλλει περιεχόμενο στο JSONPlaceholder. Κάθε τύπος σφάλματος που προκύπτει εμφανίζεται σε μια διαφορετική μη ταξινομημένη λίστα.
Βήμα 4: Ρύθμιση μιας κοινής βασικής παρουσίας (Base Instance)
Σε αυτό το βήμα, θα δημιουργήσουμε μια κοινή βασική παρουσία χρησιμοποιώντας τη μέθοδο axios.create() . Ο στόχος πίσω από τη ρύθμιση μιας κοινής βασικής παρουσίας είναι η κοινή χρήση ενός base URL σε όλες τις παρουσίες.
Η κοινή βασική παρουσία είναι χρήσιμη εάν όλες οι κλήσεις σας χρησιμοποιούν έναν κοινό διακομιστή ή κεφαλίδα όπως η Authorization κεφαλίδα:
|
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}" } }) |
Τέλος, είστε έτοιμοι να χρησιμοποιήσετε το HTTP στο component σας:
Με όλη τη ρύθμιση παραμέτρων ολοκληρωμένη, το http-demo.js μας έχει δημιουργηθεί. Τώρα, το Axios συνδέεται με το JSONPlaceholder και την κεφαλίδα Authorization ταυτόχρονα, χρησιμοποιώντας την ίδια βάση κώδικα. Το καλύτερο μέρος είναι ότι το Axios ανακτά τα posts, εντοπίζει τα σφάλματα και τα εμφανίζει σε μια μη ταξινομημένη λίστα.
Συμπέρασμα
Σε αυτόν τον οδηγό, μάθαμε τα βασικά της αποστολής και ανάκτησης δεδομένων χρησιμοποιώντας το Axios. Επιπλέον, δημιουργήσαμε ένα κοινό βασικό στιγμιότυπο για να μοιραζόμαστε μια κοινή διεύθυνση URL. Ωστόσο, αυτό δεν πρέπει να είναι το τέλος της εκμάθησής σας για το Axios. Σας ενθαρρύνουμε να εξασκηθείτε σε άλλες μεθόδους του Axios για να στείλετε POST, PUT, PATCH και DELETE αιτήματα. Εμβαθύνετε στην τεκμηρίωση του Axios για να εξερευνήσετε το θέμα και να προσπαθήσετε να δημιουργήσετε έργα μόνοι σας.
Για να μάθετε περισσότερα σχετικά με θέματα του Axios και του Vue.js, δείτε αυτούς τους πόρους από το ιστολόγιό μας:
- Χρήση του HTTP client Axios σε μια εφαρμογή React: Ένας οδηγός
- Χρήση του Vue και του Axios για την εμφάνιση δεδομένων από ένα API
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.