Πολλές διαδικτυακές εφαρμογές αντιμετωπίζουν την ανάγκη διασύνδεσης με ένα REST API σε κάποιο σημείο της ανάπτυξής τους. Για React-based διαδικτυακές εφαρμογές, μπορούμε να χρησιμοποιήσουμε το Axios, έναν ελαφρύ πελάτη HTTP που βασίζεται στην υπηρεσία $http εντός του Angular.js v1.x. Τα χαρακτηριστικά είναι παρόμοια με το εγγενές Fetch API.
Το Axios βασίζεται σε promises, δίνοντάς μας τη δυνατότητα να ενσωματώσουμε τα async και await για πιο ευανάγνωστο σύγχρονο κώδικα. Υποστηρίζει επίσης αναχαίτιση και ακύρωση αιτημάτων. Επιπλέον, υπάρχει ενσωματωμένη προστασία από την πλευρά του πελάτη έναντι πλαστογράφησης αιτημάτων μεταξύ ιστότοπων (cross-site request forgery).
Σε αυτόν τον οδηγό, θα παρουσιάσουμε πώς να χρησιμοποιήσετε το Axios για να αποκτήσετε πρόσβαση στο δημοφιλές JSON Placeholder API σε μια δοκιμαστική εφαρμογή React. Μπορείτε να μάθετε περισσότερα για τη μορφή JSON στη JavaScript από αυτό το σεμινάριο.
Προαπαιτούμενα
Για να ολοκληρώσετε τα βήματα που παρουσιάζονται σε αυτόν τον οδηγό, θα χρειαστείτε τα ακόλουθα στοιχεία:
- Έναν κατάλληλα ρυθμισμένο διακομιστή Ubuntu. Εδώ είναι τα βήματα για τη ρύθμιση του δικού σας διακομιστή Ubuntu στο CloudSigma.
- Την τελευταία έκδοση του Node.js εγκατεστημένη. Δείτε πώς να εγκαταστήσετε το Node.js στο Ubuntu.
- Ένα νέο έργο React που χρησιμοποιεί το Create React App. Θα είναι χρήσιμο να ακολουθήσετε και να εκτελέσετε πρώτα αυτόν τον οδηγό για τη ρύθμιση ενός έργου React χρησιμοποιώντας το Create React App.
- Βασική κατανόηση των HTML, CSS, και JavaScript.
Βήμα 1: Εγκατάσταση του Axios στο έργο React
Το Axios είναι άμεσα διαθέσιμο ως μια ενότητα npm. Δείτε το Axios στο npm. Το μόνο που χρειαζόμαστε είναι να δημιουργήσουμε ένα έργο React και να εγκαταστήσουμε το πακέτο Axios.
Η ακόλουθη εντολή npx θα εκτελέσει το create-react-app για να δημιουργήσει ένα νέο έργο React. Το όνομα του έργου θα χρησιμοποιηθεί για τη δημιουργία ενός αποκλειστικού καταλόγου για το έργο. Εδώ, ονομάσαμε το έργο react-axios-demo. Εκτελέστε την εντολή:
|
1 |
npx create-react-app react-axios-demo |
Αλλάξτε τον τρέχοντα κατάλογο στον νεοδημιουργηθέντα κατάλογο του έργου:
|
1 |
cd react-axios-demo/ |
Στη συνέχεια, καλέστε την εντολή npm install για να εγκαταστήσετε το Axios. Εάν δεν καθοριστεί έκδοση, τότε το npm θα κατεβάσει και θα εγκαταστήσει αυτόματα την τελευταία έκδοση του Axios:
|
1 |
npm install axios |
Το έργο μας είναι τώρα έτοιμο να χρησιμοποιήσει το Axios! Ήρθε η ώρα να θέσουμε τα χαρακτηριστικά του σε λειτουργία.
Βήμα 2: Κατασκευή ενός αιτήματος GET
Σε αυτό το βήμα, θα παρουσιάσουμε τη δημιουργία ενός νέου στοιχείου που χρησιμοποιεί το Axios για την αποστολή ενός αιτήματος GET .
Αρχικά, δημιουργήστε ένα νέο στοιχείο PersonList που θα εμφανίζει μια λίστα ονομάτων. Δημιουργήστε έναν αποκλειστικό κατάλογο για την αποθήκευση του στοιχείου:
|
1 |
mkdir -pv src/components |
Στη συνέχεια, δημιουργήστε το αρχείο PersonList.js :
|
1 |
touch PersonList.js |
Ανοίξτε το αρχείο σε έναν επεξεργαστή κειμένου. Χρησιμοποιούμε το Visual Studio Code για άνεση και αναγνωσιμότητα. Εισαγάγετε τον ακόλουθο κώδικα JavaScript:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Εδώ:
-
Έχουμε εισαγάγει το React και το Axios ώστε να μπορούμε να τα χρησιμοποιήσουμε και τα δύο στο στοιχείο.
-
Συνδεόμαστε στο hook κύκλου ζωής componentDidMount και στέλνουμε ένα αίτημα GET.
Μπορείτε να χρησιμοποιήσετε το axios.get(<url>) από ένα τελικό σημείο API για να λάβετε ένα promise (επιστρέφει ένα αντικείμενο απόκρισης). Μέσα στο αντικείμενο απόκρισης, περιέχονται τα επιθυμητά δεδομένα. Στη συνέχεια, τα εκχωρούμε στην τιμή του person. Μπορούμε επίσης να συλλέξουμε πρόσθετες πληροφορίες σχετικά με το αίτημα, όπως τον κωδικό κατάστασης στο res.status ή περισσότερες πληροφορίες από το res.request.
Στη συνέχεια, πρέπει να προσθέσουμε το στοιχείο μας στο κύριο App.js αρχείο. Προσθέστε τους ακόλουθους κώδικες:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Η ρύθμιση παραμέτρων ολοκληρώθηκε για αυτό το βήμα. Μπορείτε τώρα να εκτελέσετε την εφαρμογή και να τη δοκιμάσετε χρησιμοποιώντας το αγαπημένο σας πρόγραμμα περιήγησης. Εκκινήστε τον διακομιστή ανάπτυξης:
|
1 |
npm start |
Όπως μπορούμε να δούμε, το αποτέλεσμα εμφανίζει μια λίστα με ονόματα ανθρώπων σε τυχαία σειρά:
Βήμα 3: Δημιουργία αιτήματος POST
Σε αυτήν την ενότητα, θα παρουσιάσουμε τη χρήση του Axios για την εκτέλεση μιας άλλης μεθόδου αιτήματος HTTP που ονομάζεται POST. Για να το δείξουμε αυτό, ο στόχος μας είναι να δημιουργήσουμε ένα νέο στοιχείο στο React έργο μας με το όνομα PersonAdd.
Δημιουργήστε το αρχείο PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Στη συνέχεια, ανοίξτε το αρχείο σε έναν επεξεργαστή κειμένου και εισαγάγετε τον ακόλουθο κώδικα:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Όνομα Ατόμου: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Προσθήκη</button> </form> </div> ) } } |
Σε αυτόν τον κώδικα, λαμβάνουμε τα δεδομένα εισόδου του χρήστη και κάνουμε POST το περιεχόμενο σε ένα API. Μέσα στη handleSubmit συνάρτηση, αποτρέπουμε την προεπιλεγμένη ενέργεια της φόρμας και ενημερώνουμε το state με τα δεδομένα εισόδου του χρήστη. Όταν χρησιμοποιούμε POST επιστρέφει το ίδιο αντικείμενο απόκρισης. Μπορούμε να χρησιμοποιήσουμε το αντικείμενο μέσα σε μια κλήση then . Για να εκπληρώσουμε το POST αίτημα, καταγράφουμε τα δεδομένα εισόδου του χρήστη και τα προσθέτουμε μαζί με το POST αίτημα. Αυτό μας δίνει μια απόκριση. Καταγράφουμε την απόκριση χρησιμοποιώντας το console.log. Θα πρέπει να εμφανίζει τα δεδομένα εισόδου του user στη φόρμα.
Στη συνέχεια, προσθέστε το στοιχείο στο App.js. Ο πλήρης κώδικας θα πρέπει να μοιάζει κάπως έτσι:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Τώρα, ήρθε η ώρα να δοκιμάσετε τις αλλαγές. Εκκινήστε τον διακομιστή ανάπτυξης:
|
1 |
npm start |
Ελέγξτε την αλλαγή στο πρόγραμμα περιήγησης ιστού:
Βήμα 4: Δημιουργία αιτήματος DELETE
Σε αυτήν την ενότητα, θα δείξουμε τη διαγραφή στοιχείων από ένα API με τη βοήθεια του axios.delete και χρησιμοποιώντας ένα URL ως παράμετρο. Για να το δείξουμε αυτό, δημιουργήστε το στοιχείο PersonRemove. Δημιουργήστε το αρχείο PersonRemove.js στον src/components κατάλογο:
|
1 |
touch src/components/PersonRemove.js |
Μετά από αυτό, ανοίξτε το αρχείο σε έναν επεξεργαστή κειμένου και προσθέστε τον ακόλουθο κώδικα:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> ID Ατόμου: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Διαγραφή</button> </form> </div> ) } } |
Εδώ, το res αντικείμενο παρέχει τις πληροφορίες σχετικά με το αίτημα. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε το console.log αφού υποβληθεί η φόρμα.
Στη συνέχεια, εφαρμόστε το component στο App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Ώρα να δοκιμάσουμε ξανά τον κώδικά μας. Εκκινήστε τον διακομιστή:
|
1 |
npm start |
Θα πρέπει να βρείτε μια νέα φόρμα που παίρνει το όνομα του χρήστη και το αφαιρεί από τη λίστα:
Βήμα 5: Εφαρμογή Base Instance στο Axios
Τώρα, θα εργαστούμε με το base instance του Axios. Εδώ, μπορούμε να ορίσουμε ένα URL και άλλα στοιχεία παραμετροποίησης. Για να το εφαρμόσετε, δημιουργήστε ένα ξεχωριστό αρχείο api.js:
|
1 |
touch src/api.js |
Ανοίξτε το σε έναν επεξεργαστή κειμένου και εισαγάγετε τον ακόλουθο κώδικα:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Μόλις οριστεί, μπορούμε να το χρησιμοποιήσουμε μέσα στο PersonRemove component. Δείτε πώς θα μοιάζει ο κώδικας:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Εδώ, το http://jsonplaceholder.typicode.com/ έχει οριστεί ως το base URL. Τώρα, δεν χρειάζεται πλέον να χρησιμοποιούμε ολόκληρο το URL κάθε φορά που καλούμε ένα endpoint του API.
Βήμα 6: Εφαρμογή async και await
Σε αυτήν την ενότητα, θα δούμε πώς να εφαρμόσουμε τα async και await για να εργαστούμε με promises. Η λέξη-κλειδί await επιλύει το promise και επιστρέφει την τιμή. Μπορούμε να εκχωρήσουμε αυτήν την τιμή σε μια μεταβλητή για πιο εύκολη χρήση.
Δείτε πώς θα μοιάζει ο ενημερωμένος κώδικας του PersonRemove.js :
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Εδώ, αντικαταστήσαμε .then(). Μόλις promise επιλυθεί, αποθηκεύουμε την τιμή στη μεταβλητή response.
Τελικές σκέψεις
Σε αυτόν τον οδηγό, εξερευνήσαμε διάφορα παραδείγματα χρήσης του Axios για εργασία με REST API. Ο κώδικας παρουσιάζει τη δημιουργία αιτημάτων HTTP και τον χειρισμό αποκρίσεων.
Ενδιαφέρεστε να μάθετε περισσότερα για τη JavaScript; Δείτε τους άλλους οδηγούς μας για αρχάριους σχετικά με διάφορες έννοιες και δυνατότητες της JavaScript, για παράδειγμα, ημερομηνία και ώρα, χειρισμό συμβολοσειρών, κλάσεις, και αντικείμενα.
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.