Εισαγωγή
Το Axios είναι μια βιβλιοθήκη πελατών HTTP βασισμένη σε υποσχέσεις που διευκολύνει την αποστολή ασύγχρονων αιτημάτων HTTP (όπως π.χ. POST, GET, να DELETE) στα τελικά σημεία REST, κυρίως API.
Σε αυτό το άρθρο, θα μάθουμε πώς να στέλνουμε αιτήματα POST JSON με το Axios και πώς να χειριζόμαστε τόσο σειριακά όσο και μη σειριακά δεδομένα.
Πώς να στείλετε αιτήματα POST JSON χρησιμοποιώντας το Axios
Το αίτημα POST χρησιμοποιείται για αποστολή δεδομένων σε ένα τελικό σημείο. Για παράδειγμα, εάν έχουμε μια σελίδα εγγραφής όπου οι χρήστες υποβάλλουν τα στοιχεία τους, αυτές οι πληροφορίες μπορούν να σταλούν ως JSON στο τελικό σημείο που καθορίζουμε χρησιμοποιώντας ένα αίτημα POST JSON.
Χρησιμοποιούμε το axios.post() μέθοδος αποστολής ενός αιτήματος POST με το Axios, το οποίο παίρνει δύο κύριες παραμέτρους – τη διεύθυνση URL του τελικού σημείου (url), και το αντικείμενο που αντιπροσωπεύει δεδομένα που θέλουμε να δημοσιεύσουμε (data):
axios.post(url[, data[, config]])
Εκτός από αυτές τις δύο παραμέτρους, υπάρχει και μια τρίτη - config. Χρησιμοποιείται για τη διαμόρφωση του αιτήματος POST που στέλνουμε, κυρίως για τη ρύθμιση κεφαλίδων.
Αποστολή μη σειριακών δεδομένων
Είναι σημαντικό να σημειωθεί ότι το Axios χρησιμοποιεί JSON για την ανάρτηση δεδομένων από προεπιλογή, πράγμα που σημαίνει ότι κάθε αντικείμενο που περνάμε στο Axios σειριοποιεί αυτόματα το αντικείμενο σε JSON και ορίζει Content-Type κεφαλίδα προς application/json. Ας το δείξουμε αυτό στο παράδειγμα - ας υποθέσουμε ότι δημοσιεύουμε το αντικείμενο { name: 'John Doe' }:
const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });
Το Axios θα σειριοποιήσει αυτόματα το αντικείμενο σε μορφή JSON:
console.log(result.data.data);
Και όπως είπαμε θα θέσει και το δικό μας Content-Type κεφαλίδα προς application/json:
console.log(result.data.headers['Content-Type']);
Αποστολή σειριακής συμβολοσειράς JSON
Μέχρι στιγμής, έχουμε δει ότι το Axios θα σειριοποιήσει αυτόματα όσα δεδομένα του στείλουμε, αλλά σε αυτήν την περίπτωση, θα στείλουμε μια σειριακή συμβολοσειρά JSON ως δεύτερη παράμετρο του axios.post() μέθοδος:
const usersName = JSON.stringify({ name: 'John Doe' });
Το Axios απλώς θα χειριστεί αυτά τα δεδομένα ως ένα σώμα αιτήματος με κωδικοποίηση φόρμας αντί να ορίσει την κεφαλίδα τύπου περιεχομένου σε application/json, όπως φαίνεται παρακάτω:
const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);
console.log(result.data.headers['Content-Type']);
Για να επιλύσουμε αυτό το ζήτημα, πρέπει να ορίσουμε ρητά το Content-Type κεφαλίδα προς application/json. Μπορούμε να το κάνουμε περνώντας το config επιχείρημα κατά την κλήση του axios.post() μέθοδος:
const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
headers: {
'Content-Type': 'application/json'
}
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);
console.log(result.data.data);
console.log(result.data.headers['Content-Type']);
Συμπέρασμα
Σε αυτό το άρθρο, μάθαμε πώς να στέλνουμε αιτήματα POST JSON με το Axios, έχοντας πλήρη επίγνωση ότι αυτά τα δεδομένα μπορεί να είναι σειριακά ή μη, και ασχοληθήκαμε και με τα δύο σενάρια.
