Ένας πλήρης οδηγός εργασίας με το Axios

Το Axios είναι μια βιβλιοθήκη JavaScript που παρέχει ένα απλό API για την αποστολή αιτημάτων HTTP από κώδικα JavaScript του πελάτη ή κώδικα Node.js από την πλευρά του διακομιστή. Το Axios βασίζεται στο Promise API της JavaScript, το οποίο κάνει τον ασύγχρονο κώδικα πιο διατηρήσιμο.

Ξεκινώντας με το Axios

Μπορείτε να χρησιμοποιήσετε το Axios στην εφαρμογή σας χρησιμοποιώντας ένα Δίκτυο παράδοσης περιεχομένου (CDN) ή εγκαθιστώντας το στο έργο σας.

Για να χρησιμοποιήσετε το Axios απευθείας σε HTML, αντιγράψτε τον παρακάτω σύνδεσμο CDN και εισαγάγετέ τον στην ενότητα κεφαλής του αρχείου HTML:

<γραφήsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">γραφή>

Με αυτήν την προσέγγιση, μπορείτε να χρησιμοποιήσετε το Axios και το Μέθοδοι HTTP στο σώμα των σεναρίων HTML σας. Ο Αξιός μπορεί επίσης καταναλώστε REST API σε ένα πλαίσιο όπως το React.

Για να χρησιμοποιήσετε το Axios σε ένα έργο Node.js, εγκαταστήστε το στον κατάλογο του έργου σας χρησιμοποιώντας είτε τη διαχείριση πακέτων npm είτε νήμα:

npm εγκατάσταση axios
# ή
νήμα προσθέτω axios

Κατά την εγκατάσταση, μπορείτε να αρχίσετε να χρησιμοποιείτε το Axios στο έργο σας JavaScript:

συνθ αξιος = απαιτώ('αξιος');

Μαζί με αυτόν τον οδηγό, θα εργαστείτε με τα δωρεάν JSONPlaceholder API. Ενώ αυτό το API έχει ένα σύνολο πόρων, θα χρησιμοποιήσετε μόνο τους /comments και /posts καταληκτικά σημεία. Τα τελικά σημεία είναι συγκεκριμένες διευθύνσεις URL στις οποίες είναι δυνατή η πρόσβαση για ανάκτηση ή χειρισμό δεδομένων.

Πραγματοποίηση αιτημάτων GET με το Axios

Υπάρχουν πολλοί τρόποι για να κάνετε ένα αίτημα GET χρησιμοποιώντας το Axios. Ωστόσο, η σύνταξη εξαρτάται γενικά από την προτίμηση.

Ένας από τους τρόπους για να υποβάλετε ένα αίτημα GET είναι χρησιμοποιώντας το axios() μέθοδος με ένα αντικείμενο που καθορίζει τη μέθοδο αιτήματος ως παίρνω και τη διεύθυνση URL στην οποία θα στείλετε το αίτημα.

Για παράδειγμα:

συνθ αξιος = απαιτώ("αξιος");
axios({
 μέθοδος: "παίρνω",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .έπειτα((res) => {
κονσόλα.log (res.data);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });

Αυτό το παράδειγμα δημιουργεί μια υπόσχεση χρησιμοποιώντας το μοντέλο ασύγχρονου προγραμματισμού με την αλυσίδα του .έπειτα() και .σύλληψη() μεθόδους. Η υπόσχεση καταγράφει την απάντηση στην κονσόλα όταν το αίτημα είναι επιτυχές και καταγράφει το μήνυμα σφάλματος εάν το αίτημα αποτύχει.

Το Axios παρέχει επίσης έναν ευκολότερο τρόπο για την υποβολή αιτημάτων GET που εξαλείφουν την ανάγκη να περάσει ένα αντικείμενο συνδέοντας το .παίρνω() μέθοδος στο αξιος παράδειγμα.

Για παράδειγμα:

αξιος
 .παίρνω(" https://jsonplaceholder.typicode.com/comments")
 .έπειτα((res) => {
κονσόλα.log (res.data);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });

Πραγματοποίηση αιτημάτων POST με το Axios

Η υποβολή αιτήματος POST με το Axios είναι παρόμοια με την υποβολή αιτήματος GET. Μπορείτε να στείλετε δεδομένα σε έναν διακομιστή χρησιμοποιώντας αυτό το αίτημα.

Το παρακάτω απόσπασμα κώδικα είναι ένα παράδειγμα του τρόπου χρήσης του Axios' .Θέση() μέθοδος:

αξιος
 .Θέση(" https://jsonplaceholder.typicode.com/comments", {
 όνομα: "Τζάκσον Σμιθ",
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: "[email protected]",
 σώμα: «Αυτό είναι ένα έργο τέχνης».,
 })
 .έπειτα((res) => {
κονσόλα.log (res.data);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });

Ο κώδικας κάνει ένα αίτημα POST στο JSONPlaceholder API για τη δημιουργία ενός νέου σχολίου. ο axios.post μέθοδος στέλνει δεδομένα στο /comments τελικό σημείο.

Τα δεδομένα που αποστέλλονται στο αίτημα είναι ένα αντικείμενο με α όνομα, ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ, και σώμα ιδιοκτησία. Εάν το αίτημα είναι επιτυχές, το έπειτα μέθοδος καταγράφει τα δεδομένα απόκρισης στην κονσόλα. Και αν υπάρχει κάποιο λάθος, το σύλληψη μέθοδος καταγράφει το σφάλμα στην κονσόλα.

Πραγματοποίηση αιτημάτων PUT/PATCH με το Axios

Μπορείτε να χρησιμοποιήσετε το αίτημα PUT ή PATCH για να ενημερώσετε έναν υπάρχοντα πόρο στον διακομιστή. Ενώ το PUT αντικαθιστά ολόκληρο τον πόρο, το PATCH ενημερώνει μόνο τα καθορισμένα πεδία.

Για να κάνετε ένα αίτημα PUT ή PATCH με το Axios, πρέπει να χρησιμοποιήσετε το .βάζω() ή .κηλίδα() μεθόδους αντίστοιχα.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης αυτών των μεθόδων για την ενημέρωση του ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ ιδιοκτησία του σχολίου με αναγνωριστικό 100:

συνθ αξιος = απαιτώ("αξιος");
αξιος
 .παίρνω(" https://jsonplaceholder.typicode.com/comments/100")
 .έπειτα((res) => {
κονσόλα.log (res.data.email);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });
// Έξοδος:
// '[email protected]'
αξιος
 .κηλίδα(" https://jsonplaceholder.typicode.com/comments/100", {
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: "[email protected]",
 })
 .έπειτα((res) => {
κονσόλα.log (res.data.email);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });
// Έξοδος:
// '[email protected]',

Αυτό το πρόγραμμα κάνει πρώτα ένα αίτημα GET στο τελικό σημείο " https://jsonplaceholder.typicode.com/comments/100". Στη συνέχεια καταγράφει το ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ ιδιοκτησία του σχολίου με αναγνωριστικό του 100 στην κονσόλα. Κάνουμε ένα αίτημα GET για να μπορείτε να δείτε τι άλλαξε μετά την υποβολή του αιτήματος PATCH.

Το δεύτερο αίτημα είναι ένα αίτημα PATCH στο ίδιο τελικό σημείο. Αυτός ο κωδικός ενημερώνει το email του σχολίου στο [email protected].

Πραγματοποίηση αιτημάτων DELETE με το Axios

Μπορείτε να χρησιμοποιήσετε το ΔΙΑΓΡΑΦΩ αίτημα διαγραφής ενός πόρου στον διακομιστή.

Πάρτε το ακόλουθο παράδειγμα για το πώς να χρησιμοποιήσετε το .διαγράφω() μέθοδος διαγραφής πόρου από τον διακομιστή:

αξιος
 .διαγράφω(" https://jsonplaceholder.typicode.com/comments/10")
 .έπειτα((res) => {
κονσόλα.log (res.data);
 })
 .σύλληψη((πλανώμαι) => {
κονσόλα.error (err);
 });
//Output:
// {}

Καταγράφοντας ένα κενό αντικείμενο στην κονσόλα, ο παραπάνω κώδικας δείχνει ότι διέγραψε το σχόλιο με το αναγνωριστικό 10.

Πραγματοποίηση ταυτόχρονων αιτημάτων με το Axios

Μπορείτε να ανακτήσετε δεδομένα από πολλά τελικά σημεία ταυτόχρονα χρησιμοποιώντας το Axios. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε το .όλα() μέθοδος. Αυτή η μέθοδος δέχεται μια σειρά από αιτήματα ως παράμετρό της και επιλύεται μόνο όταν λάβετε όλες τις απαντήσεις.

Στο παρακάτω παράδειγμα, το .όλα() Η μέθοδος ανακτά δεδομένα από δύο τελικά σημεία ταυτόχρονα:

αξιος
 .όλα([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .έπειτα(
 axios.spread((σχόλια, αναρτήσεις) => {
κονσόλα.log (comments.data);
κονσόλα.log (posts.data);
 })
 )
 .σύλληψη((πλανώμαι) =>κονσόλα.error (err));

Το παραπάνω μπλοκ κώδικα στέλνει αιτήματα ταυτόχρονα και στη συνέχεια μεταβιβάζει τις απαντήσεις στο .έπειτα() μέθοδος. του Αξιού .εξάπλωση() Η μέθοδος διαχωρίζει τις απαντήσεις και εκχωρεί κάθε απάντηση στη μεταβλητή της.

Τέλος, η κονσόλα καταγράφει το δεδομένα ιδιοκτησία των δύο απαντήσεων: σχόλια και αναρτήσεις.

Υποκλοπή αιτημάτων με τον Axios

Μερικές φορές, μπορεί να χρειαστεί να υποκλέψετε ένα αίτημα προτού φτάσει στον διακομιστή. Μπορείτε να χρησιμοποιήσετε το Axios' interceptors.request.use() μέθοδος υποκλοπής αιτημάτων.

Στο ακόλουθο παράδειγμα, η μέθοδος καταγράφει τον τύπο αιτήματος στην κονσόλα για κάθε αίτημα που υποβάλλεται:

axios.interceptors.request.use(
 (config) => {
κονσόλα.κούτσουρο(`${config.method} υποβλήθηκε αίτημα».);
ΕΠΙΣΤΡΟΦΗ config;
 },
 (λάθος) => {
ΕΠΙΣΤΡΟΦΗΥπόσχεση.reject (σφάλμα)?
 }
);
αξιος
 .παίρνω(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .έπειτα((res) =>κονσόλα.log (res.data))
 .σύλληψη((πλανώμαι) =>κονσόλα.error (err));

Το πρόγραμμα ορίζει έναν αναχαιτιστή Axios χρησιμοποιώντας το axios.interceptors. request.use μέθοδος. Αυτή η μέθοδος παίρνει config και λάθος αντικείμενα ως επιχειρήματα. ο config Το αντικείμενο περιέχει πληροφορίες σχετικά με το αίτημα, συμπεριλαμβανομένης της μεθόδου αίτησης (config.method) και τη διεύθυνση URL αιτήματος (config.url).

Η λειτουργία αναχαίτισης επιστρέφει το config αντικείμενο, επιτρέποντας στο αίτημα να προχωρήσει κανονικά. Εάν υπάρχει σφάλμα, η συνάρτηση επιστρέφει το απορριφθέν Υπόσχεση αντικείμενο.

Τέλος, το πρόγραμμα κάνει ένα αίτημα για δοκιμή του αναχαιτιστή. Η κονσόλα θα καταγράψει τον τύπο του αιτήματος που υποβλήθηκε, σε αυτήν την περίπτωση, ένα αίτημα GET.

Υπάρχουν περισσότερα για τον Αξιό

Μάθατε πώς να κάνετε και να παρακολουθείτε αιτήματα στα έργα σας χρησιμοποιώντας το Axios. Πολλές άλλες δυνατότητες, όπως ο μετασχηματισμός αιτημάτων και η χρήση παρουσιών του Axios, είναι διαθέσιμες για εξερεύνηση ως προγραμματιστής JavaScript. Το Axios παραμένει μια προτιμώμενη επιλογή για την υποβολή αιτημάτων HTTP στις εφαρμογές σας JavaScript. Ωστόσο, το Fetch API είναι μια άλλη καλή επιλογή που μπορείτε να εξερευνήσετε.