Οι περισσότερες από τις εφαρμογές που δημιουργούμε σήμερα καταναλώνουν δεδομένα από εξωτερικές πηγές μέσω API. Λαμβάνουν δεδομένα από έναν διακομιστή και τα εμφανίζουν στη διεπαφή χρήστη τους.

Χρησιμοποιώντας το React, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο άγκιστρο για τη λήψη δεδομένων από ένα API. Δεδομένου ενός URL, αυτό το άγκιστρο θα επιστρέψει ένα αντικείμενο που περιέχει τα δεδομένα και ένα προαιρετικό μήνυμα σφάλματος. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το άγκιστρο σε ένα εξάρτημα.

Δημιουργία προσαρμοσμένου γάντζου React

Ξεκινήστε δημιουργώντας ένα νέο αρχείο που ονομάζεται useFetch.js. Σε αυτό το αρχείο, δημιουργήστε μια συνάρτηση που ονομάζεται useFetch() που δέχεται μια συμβολοσειρά URL ως παράμετρο.

συνθ useFetch = (url) => {
}

Ο γάντζος πρέπει πραγματοποιήστε την κλήση API αμέσως μετά την κλήση. Μπορείτε να χρησιμοποιήσετε το Άγκιστρο useEffect(). για αυτό.

Για τις πραγματικές κλήσεις API, χρησιμοποιήστε το fetch API. Αυτό το API είναι μια διεπαφή που βασίζεται σε υποσχέσεις που σας επιτρέπει να κάνετε αιτήματα και να λαμβάνετε απαντήσεις μέσω HTTP ασύγχρονα.

instagram viewer

Στο προσαρμοσμένο άγκιστρο useFetch(), προσθέστε τα ακόλουθα.

εισαγωγή { useEffect, useState } από "αντιδρώ";
συνθ useFetch = (url) => {
συνθ [data, setdata] = useState(μηδενικό);
συνθ [φόρτωση, φόρτωση ρύθμισης] = useState(αληθής);
 const [σφάλμα, seterror] = useState("");


useEffect(() => {
 ανάκτηση (url)
 .then((res) => res.json())
 .then((data) => {
σετετρόμος(δεδομένα.λάθος)
σύνολο δεδομένων(δεδομένα.αστείο)
 φόρτωση ρυθμίσεων (ψευδής)
 })
 }, [url]);


ΕΠΙΣΤΡΟΦΗ { δεδομένα, φόρτωση, σφάλμα };
};
εξαγωγήΠροκαθορισμένο useFetch;

Σε αυτό το άγκιστρο, αρχικοποιείτε πρώτα την κατάσταση τριών τιμών:

  • δεδομένα: Διατηρεί την απόκριση API.
  • error: Κρατάει ένα μήνυμα σφάλματος εάν παρουσιαστεί σφάλμα.
  • φόρτωση: Διατηρεί μια δυαδική τιμή που υποδεικνύει εάν έχει ανακτήσει τα δεδομένα API. Αρχικοποιήστε την κατάσταση φόρτωσης σε true. Μόλις το API επιστρέψει δεδομένα, ορίστε τα σε false.

Το άγκιστρο useEffect() παίρνει τη συμβολοσειρά URL ως όρισμα. Αυτό γίνεται για να διασφαλιστεί ότι εκτελείται κάθε φορά που αλλάζει η διεύθυνση URL.

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

Χρήση προσαρμοσμένου γάντζου React

Για να χρησιμοποιήσετε το προσαρμοσμένο άγκιστρο useFetch() που μόλις δημιουργήσατε, ξεκινήστε με την εισαγωγή του:

συνθ useFetch = απαιτώ("./useFetch")

Στη συνέχεια χρησιμοποιήστε το ως εξής:

συνθ {data, loading, error} = useFetch (url)

Για να το αποδείξετε, εξετάστε το ακόλουθο στοιχείο Jokes:

συνθ Ανέκδοτα = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? τύπος=μονός>";
συνθ { data, loading, error } = useFetch (url);
αν (φόρτωση) ΕΠΙΣΤΡΟΦΗ (
<div>Φόρτωση...</div>
 )


ΕΠΙΣΤΡΟΦΗ (
<div>
 {λάθος &&<div>{λάθος}</div>}
 {δεδομένα &&<div>{<div>{δεδομένα}</div>}</div>}
</div>
 );
};
εξαγωγήΠροκαθορισμένο Ανέκδοτα?

Καλεί το άγκιστρο useFetch() με τη διεύθυνση URL στο Jokes API και λαμβάνει τα δεδομένα, τη φόρτωση και τις τιμές σφάλματος.

Για να αποδώσετε το στοιχείο Jokes, ελέγξτε πρώτα εάν η φόρτωση είναι αληθής. Εάν είναι, εμφανίστε μια δήλωση "Φόρτωση...", διαφορετικά αποδώστε τα δεδομένα και το μήνυμα σφάλματος εάν υπάρχουν.

Γιατί να χρησιμοποιήσετε Custom React Hooks;

Ακριβώς όπως χρησιμοποιήσατε το προσαρμοσμένο άγκιστρο useFetch() σε αυτό το στοιχείο, μπορείτε να το χρησιμοποιήσετε ξανά σε άλλα στοιχεία. Αυτή είναι η ομορφιά της εξωτερίκευσης της λογικής στα άγκιστρα αντί να τη γράφεις σε κάθε στοιχείο.

Τα άγκιστρα είναι ένα ισχυρό χαρακτηριστικό του React που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε τη σπονδυλωτότητα του κώδικά σας.