Ένας πρακτικός οδηγός ES6 για τον τρόπο εκτέλεσης αιτήσεων HTTP χρησιμοποιώντας το API Fetch

Εικόνα δημιουργήθηκε από τον Jad Joubran

Σε αυτόν τον οδηγό, θα σας δείξω πώς να χρησιμοποιήσετε το API Fetch (ES6 +) για να εκτελέσετε αιτήσεις HTTP σε ένα REST API με μερικά πρακτικά παραδείγματα που πιθανότατα θα συναντήσετε.

Θέλετε να δείτε γρήγορα τα παραδείγματα HTTP; Μεταβείτε στην ενότητα 5. Το πρώτο μέρος περιγράφει το ασύγχρονο τμήμα της JavaScript κατά την επεξεργασία των αιτημάτων HTTP.

Σημείωση: Όλα τα παραδείγματα γράφονται στο ES6 με λειτουργίες βέλους.

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

Για να χειριστούμε περαιτέρω έναν πόρο, χρησιμοποιούμε συχνά αυτές τις μεθόδους JS (συνιστάται) όπως .map (), .filter () και .reduce ().

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

Εδώ πρόκειται για το τι θα εξετάσουμε

  1. Αντιμετώπιση των ασύγχρονων αιτήσεων HTTP της JS
  2. Τι είναι το AJAX;
  3. Γιατί να φέρω το API;
  4. Μια γρήγορη εισαγωγή στο Fetch API
  5. Λήψη API - CRUD παραδείγματα ← τα καλά πράγματα!

1. Αντιμετώπιση των ασύγχρονων αιτήσεων HTTP της JS

Ένα από τα πιο απαιτητικά μέρη με την κατανόηση του πώς λειτουργεί το JavaScript (JS) είναι η κατανόηση του τρόπου αντιμετώπισης ασύγχρονων αιτημάτων, που απαιτεί και κατανοεί πώς λειτουργούν οι υποσχέσεις και οι επανακλήσεις.

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

Αλλά με την JS, έχουμε πολλές λειτουργίες που εκτελούνται στο παρασκήνιο / στο προσκήνιο και δεν μπορούμε να έχουμε μια εφαρμογή ιστού που παγώνει κάθε φορά που περιμένει για ένα συμβάν χρήστη.

Η περιγραφή του JavaScript ως ασύγχρονης είναι ίσως παραπλανητική. Είναι πιο ακριβές να λέμε ότι το JavaScript είναι σύγχρονο και μονόκλωνο με διάφορους μηχανισμούς επανάκλησης. Διαβάστε περισσότερα.

Παρ 'όλα αυτά, μερικές φορές τα πράγματα πρέπει να συμβαίνουν, διαφορετικά θα προκαλέσει χάος και απροσδόκητα αποτελέσματα. Για το λόγο αυτό, μπορούμε να χρησιμοποιήσουμε υποσχέσεις και επανάκλησεις για τη δομή του. Ένα παράδειγμα μπορεί να είναι η επικύρωση των διαπιστευτηρίων χρήστη πριν προχωρήσετε στην επόμενη ενέργεια.

2. Τι είναι το AJAX

Το AJAX σημαίνει Ασύγχρονη JavaScript και XML και επιτρέπει στις ιστοσελίδες να ενημερώνονται ασύγχρονα, ανταλλάσσοντας δεδομένα με έναν διακομιστή ιστού ενώ εκτελείται η εφαρμογή. Με λίγα λόγια, ουσιαστικά σημαίνει ότι μπορείτε να ενημερώσετε τμήματα μιας ιστοσελίδας χωρίς να φορτώσετε ολόκληρη τη σελίδα (η διεύθυνση URL παραμένει η ίδια).

Το AJAX είναι ένα παραπλανητικό όνομα. Οι εφαρμογές AJAX ενδέχεται να χρησιμοποιούν XML για τη μεταφορά δεδομένων, αλλά είναι εξίσου συνηθισμένη η μεταφορά δεδομένων ως απλού κειμένου ή JSON κειμένου.
 - w3shools.com

AJAX σε όλη τη διαδρομή;

Έχω δει ότι πολλοί προγραμματιστές τείνουν να γίνονται πραγματικά ενθουσιασμένοι για να έχουν τα πάντα σε μία εφαρμογή σελίδας (SPA), και αυτό οδηγεί σε πολλούς ασύγχρονους πόνους! Ευτυχώς, έχουμε βιβλιοθήκες όπως το Angular, το VueJS και το React που κάνουν την διαδικασία πολύ πιο εύκολη και πρακτική.

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

Και στις περισσότερες περιπτώσεις, μια επαναφόρτωση σελίδας λειτουργεί καλά από την άποψη του πόσο ισχυρά προγράμματα περιήγησης έχουν γίνει. Πίσω στις ημέρες, μια φόρτωση σελίδας θα διαρκούσε δευτερόλεπτα (ανάλογα με την τοποθεσία του διακομιστή και τις δυνατότητες του προγράμματος περιήγησης). Ωστόσο, τα σημερινά προγράμματα περιήγησης είναι εξαιρετικά γρήγορα, οπότε η απόφαση να εκτελεστεί το AJAX ή η επαναφόρτωση σελίδων δεν είναι μια μεγάλη διαφορά.

Η προσωπική μου εμπειρία είναι ότι είναι πολύ πιο εύκολο και πιο γρήγορο να δημιουργήσετε μια μηχανή αναζήτησης με ένα απλό κουμπί αναζήτησης από το να το κάνετε χωρίς ένα κουμπί. Και στις περισσότερες περιπτώσεις, ο πελάτης δεν ενδιαφέρεται εάν πρόκειται για SPA ή επιπλέον φόρτωση σελίδας. Φυσικά, μην με κακολογείτε, αγαπώ τα ΖΕΠ, αλλά πρέπει να εξετάσουμε μερικά συμπεράσματα, αν ασχοληθούμε με τον περιορισμένο προϋπολογισμό και την έλλειψη πόρων τότε ίσως μια γρήγορη λύση είναι καλύτερη προσέγγιση.

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

3. Γιατί Λήψη API;

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

Τώρα το πλεονέκτημα του API Fetch είναι ότι υποστηρίζεται πλήρως από το οικοσύστημα JS και αποτελεί επίσης μέρος του MDN Mozilla docs. Και τελευταίο αλλά εξίσου σημαντικό, λειτουργεί από το κουτί στα περισσότερα προγράμματα περιήγησης (εκτός από IE). Μακροπρόθεσμα, υποθέτω ότι θα γίνει ο συνηθισμένος τρόπος κλήσης των API ιστού.

Σημείωση! Γνωρίζω καλά άλλες προσεγγίσεις HTTP, όπως η χρήση του Obspect με το RXJS, και πώς εστιάζει στη διαχείριση μνήμης / διαρροή από την άποψη της εγγραφής / διαγραφής και ούτω καθεξής. Και ίσως αυτό να γίνει ο νέος τυποποιημένος τρόπος για την πραγματοποίηση αιτήσεων HTTP, ποιος ξέρει;
Εν πάση περιπτώσει, σε αυτό το άρθρο εστιάζω μόνο στο API Fetch, αλλά στο μέλλον μπορεί να γράψει ένα άρθρο σχετικά με το Observation και το RXJS.

4. Μια γρήγορη εισαγωγή στο API Fetch

Η μέθοδος fetch () επιστρέφει μια υπόσχεση που επιλύει την απάντηση από το αίτημα για να εμφανίσει την κατάσταση (επιτυχής ή μη). Εάν παίρνετε ποτέ αυτό το υπόσχεση μηνύματος {} στην οθόνη σύνδεσης της κονσόλας, μην πανικοβληθείτε - ουσιαστικά σημαίνει ότι η Υπόσχεση λειτουργεί, αλλά περιμένει να επιλυθεί. Επομένως, για να το επιλύσουμε, χρειαζόμαστε τον χειριστή .then () για να αποκτήσετε πρόσβαση στο περιεχόμενο.

Έτσι, με λίγα λόγια, καθορίζουμε πρώτα τη διαδρομή (Fetch), δεύτερον ζητούμε δεδομένα από το διακομιστή (Request), τρίτον καθορίζουμε τον τύπο περιεχομένου (Body) και, τέλος, έχουμε πρόσβαση στα δεδομένα (Response).

Εάν αγωνίζεστε να καταλάβετε αυτή την έννοια, μην ανησυχείτε. Θα έχετε καλύτερη εικόνα μέσω των παραδειγμάτων που εμφανίζονται παρακάτω.

Ο δρόμος που θα χρησιμοποιήσουμε για τα παραδείγματα μας
https://jsonplaceholder.typicode.com/users // επιστρέφει το JSON

5. Παραλαβή API - παραδείγματα HTTP

Αν θέλουμε να έχουμε πρόσβαση στα δεδομένα, χρειαζόμαστε δύο χειριστές .then () (callback). Αλλά αν θέλουμε να χειραγωγήσουμε τον πόρο, χρειαζόμαστε μόνο έναν χειριστή .then (). Ωστόσο, μπορούμε να χρησιμοποιήσουμε το δεύτερο για να βεβαιωθούμε ότι έχει αποσταλεί η τιμή.

Βασικό πρότυπο API λήψης:

Σημείωση! Το παραπάνω παράδειγμα είναι μόνο για επεξηγηματικούς σκοπούς. Ο κώδικας δεν θα λειτουργήσει αν το εκτελέσετε.

Παραλαβή παραδειγμάτων API

  1. Εμφάνιση χρήστη
  2. Εμφάνιση μιας λίστας χρηστών
  3. Δημιουργία νέου χρήστη
  4. Διαγραφή ενός χρήστη
  5. Ενημέρωση ενός χρήστη
Σημείωση! Ο πόρος δεν θα δημιουργηθεί πραγματικά στον διακομιστή, αλλά θα επιστρέψει ένα ψεύτικο αποτέλεσμα για να μιμηθεί έναν πραγματικό διακομιστή.

1. Εμφάνιση ενός χρήστη

Όπως αναφέρθηκε προηγουμένως, η διαδικασία εμφάνισης ενός μόνο χρήστη αποτελείται από δύο χειριστές .then (callback), ο πρώτος που ορίζει το αντικείμενο και ο δεύτερος για την πρόσβαση στα δεδομένα.

Παρατηρήστε μόνο από την ανάγνωση της συμβολοσειράς ερωτημάτων / χρηστών / 2 είμαστε σε θέση να καταλάβουμε / προβλέψουμε τι κάνει το API. Για περισσότερες πληροφορίες σχετικά με τον τρόπο σύνταξης του υψηλής ποιότητας API REST, ελέγξτε αυτές τις οδηγίες που γράφονται από τον Mahesh Haldar.

Παράδειγμα

2. Εμφάνιση μιας λίστας χρηστών

Το παράδειγμα είναι σχεδόν πανομοιότυπο με το προηγούμενο παράδειγμα εκτός από το ότι η συμβολοσειρά ερωτήματος είναι / χρήστες και όχι / users / 2.

Παράδειγμα

3. Δημιουργία νέου χρήστη

Αυτό φαίνεται λίγο διαφορετικό από το προηγούμενο παράδειγμα. Αν δεν είστε εξοικειωμένοι με το πρωτόκολλο HTTP, μας παρέχει απλά μερικές γλυκές μεθόδους όπως POST, GET, DELETE, UPDATE, PATCH και PUT. Αυτές οι μέθοδοι είναι ρήματα που περιγράφουν απλώς τον τύπο της ενέργειας που πρέπει να εκτελεστεί και χρησιμοποιούνται ως επί το πλείστον για να χειριστούν τον πόρο / δεδομένα στο διακομιστή.

Εν πάση περιπτώσει, για να δημιουργήσουμε ένα νέο χρήστη με το API Fetch, θα χρειαστεί να χρησιμοποιήσουμε το ρήμα POST του HTTP. Αλλά πρώτα, πρέπει να το καθορίσουμε κάπου. Ευτυχώς, υπάρχει ένα προαιρετικό όρισμα Init που μπορούμε να περάσουμε μαζί με τη διεύθυνση URL για τον ορισμό προσαρμοσμένων ρυθμίσεων, όπως τύπος μεθόδου, σώμα, διαπιστευτήρια, κεφαλίδες κ.ο.κ.

Σημείωση: Οι παράμετροι της μεθόδου fetch () είναι ίδιες με αυτές του κατασκευαστή Request ().

Παράδειγμα

4. Διαγραφή ενός χρήστη

Για να διαγράψουμε τον χρήστη, πρέπει πρώτα να στοχεύσουμε τον χρήστη με τους / users / 1, και στη συνέχεια καθορίζουμε τον τύπο μεθόδου που είναι DELETE.

Παράδειγμα

5. Ενημέρωση χρήστη

Το ρήμα HTTP του HTTP χρησιμοποιείται για τον χειρισμό του πόρου-στόχο και εάν θέλετε να κάνετε μερικές αλλαγές, θα χρειαστεί να χρησιμοποιήσετε το PATCH. Για περισσότερες πληροφορίες σχετικά με το τι κάνουν αυτά τα ρήματα HTTP, ελέγξτε το.

Παράδειγμα

συμπέρασμα

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

Προσωπικά, πιστεύω ότι το API Fetch είναι δηλωτικό και μπορείτε εύκολα να καταλάβετε τι συμβαίνει χωρίς κάποια τεχνική εμπειρία κωδικοποίησης.

Όλα τα παραδείγματα εμφανίζονται στην υποσχόμενη αίτηση βάσης, όπου αλλιώς το αίτημα χρησιμοποιείται με .then callback. Αυτή είναι μια τυπική προσέγγιση την οποία πολλοί devs είναι εξοικειωμένοι, ωστόσο, αν θέλετε να χρησιμοποιήσετε async / await ελέγξτε αυτό το άρθρο. Η ιδέα είναι η ίδια, με την εξαίρεση ότι το async / await είναι ευκολότερο να διαβαστεί και να γραφτεί.

Εδώ είναι μερικά άρθρα που έχω γράψει για το web-οικοσύστημα μαζί με προσωπικές συμβουλές προγραμματισμού και κόλπα.

  • Μια σύγκριση μεταξύ του γωνιακού και του React
  • Ένα χαοτικό μυαλό οδηγεί σε χαοτικό κώδικα
  • Προγραμματιστές που συνεχώς θέλουν να μάθουν νέα πράγματα
  • Ένας πρακτικός οδηγός για τις μονάδες ES6
  • Μάθετε αυτές τις βασικές έννοιες Web
  • Ενισχύστε τις δεξιότητές σας με αυτές τις σημαντικές μεθόδους JavaScript
  • Προγραμματίστε ταχύτερα δημιουργώντας προσαρμοσμένες εντολές bash

Μπορείτε να με βρείτε στο Medium όπου δημοσιεύω σε εβδομαδιαία βάση. Ή μπορείτε να με ακολουθήσετε στο Twitter, όπου δημοσιεύω σχετικές συμβουλές και τεχνάσματα ανάπτυξης ιστοσελίδων μαζί με προσωπικές ιστορίες.

ΥΣΤΕΡΟΓΡΑΦΟ. Εάν σας άρεσε αυτό το άρθρο και θέλετε περισσότερα σαν αυτά, παρακαλώ λασπίστε ❤ και μοιραστείτε με φίλους που ίσως χρειαστούν, είναι καλό κάρμα.