Πώς να καταναλώνετε API στο React χρησιμοποιώντας το Fetch και το Axios

Ένα API (Application Programming Interface) είναι ένα σύνολο πρωτοκόλλων που επιτρέπει σε μια εφαρμογή να στέλνει αιτήματα σε έναν διακομιστή και να λαμβάνει μια απάντηση.

Μέσω των API, είστε σε θέση να ενσωματώσετε κομμάτια λογισμικού στην εφαρμογή σας χωρίς σκληρή δουλειά. Αυτή η διαδικασία χρήσης ενός API στην εφαρμογή σας αναφέρεται γενικά ως κατανάλωση API. Για παράδειγμα, εάν θέλετε να εμφανίσετε μια συγκεκριμένη τοποθεσία στον ιστότοπό σας, θα χρησιμοποιούσατε το API Χαρτών Google αντί να εφαρμόσετε τη λειτουργικότητα του χάρτη από την αρχή. Τα API, επομένως, μειώνουν τον φόρτο εργασίας σας και εξοικονομούν χρόνο.

Για να μάθετε πώς να καταναλώνετε REST API στο React χρησιμοποιώντας το Fetch και το Axios, θα δημιουργήσετε μια απλή εφαρμογή React που λαμβάνει ένα τυχαίο γεγονός για τις γάτες από ένα API όταν κάνετε κλικ σε ένα κουμπί.

Τύποι API

Τα API μπορούν να ταξινομηθούν είτε βάσει διαθεσιμότητας είτε κατά περίπτωση χρήσης. Όσον αφορά τη διαθεσιμότητα, τα API μπορεί να είναι δημόσια, ιδιωτικά, συνεργαζόμενα ή σύνθετα API. Όταν ταξινομούνται ανάλογα με το σκοπό τους, μπορούν να είναι βάση δεδομένων, απομακρυσμένα, λειτουργικά συστήματα ή web API. Σε αυτό το άρθρο, θα καταναλώσουμε έναν τύπο web API που ονομάζεται REST (Κατάσταση αντιπροσωπείας) API.

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

Σχετίζεται με: Τι είναι το REST API και πώς μπορείτε να πάρετε δεδομένα για την εφαρμογή ή τον ιστότοπό σας

Προαπαιτούμενα

Για να ακολουθήσετε αυτόν τον οδηγό, θα πρέπει να έχετε:

• Βασική κατανόηση JavaScript.
• Βασικές γνώσεις React, και React hooks.
• NPM εγκατεστημένο τοπικά στο μηχάνημά σας.
• Εγκατεστημένο πρόγραμμα επεξεργασίας κειμένου ή IDE της επιλογής σας.

Δημιουργήστε μια εφαρμογή React

Αρχικά, θα χρειαστεί να δημιουργήσετε μια εφαρμογή React. Αντιγράψτε την ακόλουθη εντολή στο τερματικό σας για να ρυθμίσετε ένα περιβάλλον ανάπτυξης React.

npx create-react-app catfact

Μόλις ολοκληρωθεί η εκτέλεση της εντολής, ανοίξτε το catfact φάκελο στον επεξεργαστή κειμένου σας. Θα γράψετε τον κωδικό σας στο αρχείο App.js στο src φάκελο, οπότε προχωρήστε και αφαιρέστε τον περιττό κωδικό.

εισαγωγή "./App.css";
λειτουργία Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (


Πατήστε το κουμπί για ένα τυχαίο γεγονός γάτας!



Λάβετε το γεγονός της Cat



 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

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

Σε app.js

εισαγωγή './App.css';
λειτουργία Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (


Πατήστε το κουμπί για ένα τυχαίο γεγονός γάτας!



Λάβετε το γεγονός της Cat



 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Για να διαμορφώσετε την εφαρμογή σας, προσθέστε τον ακόλουθο κώδικα στο app.css αρχείο.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Εφαρμογή {
 font-family: 'Playfair Display', serif;
 περιθώριο: 20 px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 βάρος γραμματοσειράς: 700;
 μέγεθος γραμματοσειράς: 3em;
}
κουμπί {
 γέμιση: 1em 1,2em;
 σύνορο: κανένα;
 μέγεθος γραμματοσειράς: 1em;
 χρώμα φόντου: #131212;
 χρώμα: #ffffff;
 ακτίνα συνόρων: 0,5 εκ.
 δρομέας: δείκτης;
}
κουμπί: αιώρηση{
 φόντο-χρώμα:#3b3b3b;
}

Η αίτησή σας θα πρέπει τώρα να μοιάζει με αυτό.

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

Σχετίζεται με: Πώς να δημιουργήσετε την πρώτη σας εφαρμογή React με JavaScript

Κατανάλωση REST API με χρήση του Fetch

Ανάκτηση API είναι μια διεπαφή που σας επιτρέπει να λαμβάνετε πόρους από ένα API μέσω αιτημάτων HTTP. ο φέρω() μέθοδος λαμβάνει τη διεύθυνση URL της διαδρομής προς τον πόρο ως υποχρεωτικό όρισμα και επιστρέφει μια υπόσχεση που μπορεί να επιλυθεί σε μια απάντηση.

Η βασική σύνταξη του φέρω() μέθοδος είναι η εξής:

fetch ("url σε πόρο")
 .then (απόκριση => // χειρισμός απάντησης)
 .catch (err => // σφάλμα χειρισμού)

Εφαρμογή Fetch API

Στο React, το Fetch API χρησιμοποιείται με τον ίδιο τρόπο που χρησιμοποιείται στην απλή JavaScript.

φέρω(" https://catfact.ninja/fact")
 .then (response => answer.json())
 .then (data => // handle data)
 .catch (err => // σφάλμα χειρισμού)

Στην πρώτη γραμμή του παραπάνω κώδικα, μεταβιβάζετε τη διεύθυνση URL του API στο φέρω() μέθοδος. φέρω() επιστρέφει μια απόκριση HTTP που μετατρέπεται σε JSON χρησιμοποιώντας το json() μέθοδος. Στην τρίτη γραμμή, έχετε πρόσβαση στα δεδομένα που μπορείτε στη συνέχεια να χρησιμοποιήσετε στην εφαρμογή. Τέλος, το μπλοκ catch σάς επιτρέπει να χειρίζεστε τα σφάλματα με χάρη.

Για να εφαρμόσετε το αίτημα ανάκτησης στο στοιχείο της εφαρμογής, θα χρησιμοποιήσετε τα άγκιστρα React. Με τη χρήση του useEffect hook, η εφαρμογή σας θα υποβάλει το αίτημα μόλις φορτώσει το στοιχείο και το χρήση Κατάσταση Το άγκιστρο θα δημιουργήσει και θα ενημερώσει την κατάσταση του στοιχείου. Η παρακολούθηση της κατάστασης διασφαλίζει ότι το στοιχείο αποδίδεται εκ νέου όταν το fetch API επιστρέφει την απόκριση.

Σχετίζεται με: Hooks: The Hero of React

εισαγωγή useState και useEffect.
εισαγωγή { useEffect, useState } από το 'react'

Δημιουργήστε μια κατάσταση για να κρατήσετε το γεγονός της γάτας και τη συνάρτηση για να το ενημερώσετε.

const [γεγονός, setFact] = useState('')

Στη συνέχεια, δημιουργήστε μια συνάρτηση για να κάνετε το αίτημα GET στο API και καλέστε το στο useEffect άγκιστρο.

const fetchFact = () => {
φέρω(" https://catfact.ninja/fact")
 .then((response) => answer.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Το αρχείο σας app.js θα πρέπει τώρα να μοιάζει με αυτό:

εισαγωγή "./App.css";
εισαγωγή { useEffect, useState } από το "react";
λειτουργία Εφαρμογή() {
 const [γεγονός, setFact] = useState("");
 const fetchFact = () => {
 φέρω(" https://catfact.ninja/fact")
 .then((response) => answer.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
ΕΠΙΣΤΡΟΦΗ (


Πατήστε το κουμπί για ένα τυχαίο γεγονός γάτας!



Λάβετε το γεγονός της Cat
{γεγονός}




);
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Θα πρέπει τώρα να μπορείτε να δείτε ένα τυχαίο γεγονός για τις γάτες που εμφανίζεται στο πρόγραμμα περιήγησής σας.

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

Τροποποιήστε το κουμπί για να συμπεριλάβετε ένα στο κλικ συμβάν και τη λειτουργία χειριστή του.

 handleClick()}>Λήψη γεγονότος Cat

Ορίστε το handleClick() λειτουργούν όπως φαίνεται παρακάτω.

const handleClick = () => {
 fetchFact()
}

Τώρα, όταν κάνετε κλικ στο κουμπί, το handleClick() θα καλέσει η λειτουργία fetchData() που θα εκτελέσει το αίτημα API και θα ενημερώσει την κατάσταση με ένα νέο τυχαίο γεγονός. Κατά συνέπεια, η διεπαφή χρήστη της εφαρμογής θα ενημερωθεί για να εμφανίσει το τρέχον γεγονός.

Κατανάλωση REST API με χρήση του Axios

Αντί φέρω(), μπορείτε να καταναλώνετε API με Αξιος. Αρέσει φέρω(), το Axios σάς επιτρέπει να κάνετε αιτήματα σε ένα τελικό σημείο API. Ωστόσο, υπάρχουν αρκετές διαφορές μεταξύ των δύο.

• Το Axios επιστρέφει αυτόματα την απόκριση σε JSON ενώ πρέπει να τη μετατρέψετε σε JSON όταν χρησιμοποιείτε το Fetch API.
• Το Axios απαιτεί μόνο μία επιστροφή κλήσης .then() σε αντίθεση με το Fetch API.
• Το Axios είναι συμβατό με μεγάλα προγράμματα περιήγησης ενώ το Fetch υποστηρίζεται μόνο σε Chrome 42+, Edge 14+, Firefox 39+ και Safari 10+

Υλοποίηση Axios

Εγκαταστήστε το Axios εκτελώντας την ακόλουθη εντολή.

npm εγκατάσταση axios

Αφού ολοκληρωθεί η εγκατάσταση, εισαγάγετε το πακέτο Axios στο στοιχείο της εφαρμογής σας και τροποποιήστε το fetchFact() λειτουργία για να το χρησιμοποιήσετε.

εισαγωγή axios από το «axios»
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

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

Περισσότερες χρήσεις για API με React

Μπορείτε να καταναλώσετε REST API στο React χρησιμοποιώντας διάφορες μεθόδους. Σε αυτό το σεμινάριο, μάθατε πώς να χρησιμοποιείτε το Fetch και το Axios για να ανακτήσετε ένα τυχαίο γεγονός από ένα REST API. Οι περιπτώσεις χρήσης API σε εφαρμογές πραγματικού κόσμου είναι ατελείωτες.

Για παράδειγμα, μέσω των API πληρωμών όπως το Stripe και το PayPal, τα καταστήματα μπορούν εύκολα να χειριστούν τις συναλλαγές πελατών στο διαδίκτυο χωρίς να χρειάζεται να εφαρμόσουν τα ίδια τη λειτουργικότητα. Επομένως, ακόμη λιγότεροι γνώστες της τεχνολογίας χρήστες μπορούν να δημιουργήσουν χρήσιμες εφαρμογές που εξυπηρετούν τις ανάγκες τους.

Τι είναι ο έλεγχος ταυτότητας API και πώς λειτουργεί;

Πώς αποδεικνύετε ότι το άτομο που θέλει να αποκτήσει πρόσβαση σε σημαντικά δεδομένα είναι αυτό που λέει ότι είναι; Εκεί μπαίνει ο έλεγχος ταυτότητας API...

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα