Tutorial API Fetch API με παραδείγματα JS Fetch Post και Header

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

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

Πριν από το AJAX, έπρεπε να κάνετε εκ νέου απόδοση ολόκληρης της ιστοσελίδας ακόμη και για μικρές ενημερώσεις. Όμως, η AJAX μας έδωσε έναν τρόπο λήψης περιεχομένου από το backend και ενημέρωση επιλεγμένων στοιχείων διεπαφής χρήστη. Αυτό βοήθησε τους προγραμματιστές να βελτιώσουν την εμπειρία των χρηστών και να δημιουργήσουν μεγαλύτερες, περίπλοκες πλατφόρμες ιστού.

Crash Course στα REST APIs

Είμαστε τώρα στην εποχή των RESTful APIs. Με απλά λόγια, ένα REST API σάς επιτρέπει να προωθείτε και να τραβάτε δεδομένα από ένα κατάστημα δεδομένων Αυτό μπορεί να είναι είτε η βάση δεδομένων σας είτε ένας διακομιστής τρίτου μέρους, όπως το API του Twitter.

Υπάρχουν μερικοί διαφορετικοί τύποι API REST. Ας δούμε αυτά που θα χρησιμοποιείτε στις περισσότερες περιπτώσεις.

  • GET  - Λήψη δεδομένων από το API. Για παράδειγμα, αποκτήστε έναν χρήστη twitter με βάση το όνομα χρήστη του.
  • POST  - Μεταφορά δεδομένων στο API. Για παράδειγμα, δημιουργήστε μια νέα εγγραφή χρήστη με όνομα, ηλικία και διεύθυνση email.
  • PUT  - Ενημέρωση υπάρχουσας εγγραφής με νέα δεδομένα. Για παράδειγμα, ενημερώστε τη διεύθυνση email ενός χρήστη.
  • ΔΙΑΓΡΑΦΗ  - Κατάργηση εγγραφής. Για παράδειγμα, διαγράψτε έναν χρήστη από τη βάση δεδομένων.

Υπάρχουν τρία στοιχεία σε κάθε REST API. Το αίτημα, η απάντηση και οι κεφαλίδες.

Αίτημα  - Αυτά είναι τα δεδομένα που στέλνετε στο API, όπως ένα αναγνωριστικό παραγγελίας για την ανάκτηση των στοιχείων της παραγγελίας

Απάντηση  - Οποιαδήποτε δεδομένα λαμβάνετε από τον διακομιστή μετά από μια επιτυχημένη / αποτυχημένη αίτηση.

Κεφαλίδες  - Πρόσθετα μεταδεδομένα που μεταβιβάστηκαν στο API για να βοηθήσουν τον διακομιστή να κατανοήσει τι είδους αίτημα αντιμετωπίζει, για παράδειγμα "τύπος περιεχομένου".

Το πραγματικό πλεονέκτημα της χρήσης ενός REST API είναι ότι μπορείτε να δημιουργήσετε ένα μόνο επίπεδο API για να δουλέψετε με πολλές εφαρμογές.

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

Τώρα που γνωρίζετε πώς λειτουργούν τα API REST, ας δούμε πώς μπορούμε να τα καταναλώσουμε.

XMLHttpRequest

Πριν αναλάβει η JSON τον κόσμο, η κύρια μορφή ανταλλαγής δεδομένων ήταν η XML. Το XMLHttpRequest () είναι μια συνάρτηση JavaScript που κατέστησε δυνατή τη λήψη δεδομένων από API που επέστρεψαν δεδομένα XML.

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

Αυτή η συνάρτηση έχει αναπτυχθεί από τις αρχικές της ημέρες μόνο ως XML. Τώρα υποστηρίζει άλλες μορφές δεδομένων όπως το JSON και το απλό κείμενο.

Ας γράψουμε μια απλή κλήση XMLHttpRequest στο GitHub API για ανάκτηση του προφίλ μου.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Ο παραπάνω κωδικός θα στείλει ένα αίτημα GET στη διεύθυνση //api.github.com/users/manishmshiva για ανάκτηση των πληροφοριών GitHub μου στο JSON. Εάν η απάντηση ήταν επιτυχής, θα εκτυπώσει το ακόλουθο JSON στην κονσόλα:

Εάν το αίτημα απέτυχε, θα εκτυπώσει αυτό το μήνυμα σφάλματος στην κονσόλα:

Λήψη API

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

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

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

Με υποσχέσεις, είναι εύκολο να γράψετε και να χειριστείτε ασύγχρονα αιτήματα. Εάν είστε νέοι στις υποσχέσεις, μπορείτε να μάθετε πώς λειτουργούν εδώ.

Δείτε πώς θα ήταν η συνάρτηση που γράψαμε νωρίτερα αν χρησιμοποιούσατε το fetch () αντί του XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

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

Υπάρχει μια σημαντική διαφορά μεταξύ του αντικειμένου απόκρισης στο XMLHttpRequest και στο Fetch.

Το XMLHttpRequest επιστρέφει τα δεδομένα ως απόκριση, ενώ το αντικείμενο απόκρισης από το Fetch περιέχει πληροφορίες σχετικά με το ίδιο το αντικείμενο απόκρισης. Αυτό περιλαμβάνει κεφαλίδες, κωδικό κατάστασης, κ.λπ. Καλούμε τη λειτουργία "res.json ()" για να λάβουμε τα δεδομένα που χρειαζόμαστε από το αντικείμενο απόκρισης.

Μια άλλη σημαντική διαφορά είναι ότι το Fetch API δεν θα εμφανίσει σφάλμα εάν το αίτημα επιστρέψει έναν κωδικό κατάστασης 400 ή 500. Θα εξακολουθεί να επισημαίνεται ως επιτυχημένη απόκριση και θα μεταβιβάζεται στη συνάρτηση «τότε».

Η ανάκτηση ρίχνει ένα σφάλμα μόνο εάν το ίδιο το αίτημα διακόπτεται. Για να χειριστείτε 400 και 500 απαντήσεις, μπορείτε να γράψετε προσαρμοσμένη λογική χρησιμοποιώντας το «response.status». Η ιδιότητα «κατάσταση» θα σας δώσει τον κωδικό κατάστασης της επιστρεφόμενης απόκρισης.

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

Εργασία με κεφαλίδες

Μπορείτε να περάσετε κεφαλίδες χρησιμοποιώντας την ιδιότητα "κεφαλίδες". Μπορείτε επίσης να χρησιμοποιήσετε τον κατασκευαστή κεφαλίδων για καλύτερη δομή του κώδικα. Ωστόσο, η μεταφορά ενός αντικειμένου JSON στην ιδιότητα "κεφαλίδες" πρέπει να λειτουργεί στις περισσότερες περιπτώσεις.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Διαβίβαση δεδομένων σε αίτημα POST

Για ένα αίτημα POST, μπορείτε να χρησιμοποιήσετε την ιδιότητα "body" για να μεταβιβάσετε μια συμβολοσειρά JSON ως είσοδο. Σημειώστε ότι το σώμα αιτήματος πρέπει να είναι συμβολοσειρά JSON ενώ οι κεφαλίδες πρέπει να είναι αντικείμενο JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Το Fetch API βρίσκεται ακόμη σε ενεργή ανάπτυξη. Μπορούμε να περιμένουμε καλύτερες λειτουργίες στο εγγύς μέλλον.

Ωστόσο, τα περισσότερα προγράμματα περιήγησης υποστηρίζουν τη χρήση του Fetch στις εφαρμογές σας. Το παρακάτω γράφημα θα σας βοηθήσει να καταλάβετε ποια προγράμματα περιήγησης το υποστηρίζουν στον ιστό και σε εφαρμογές για κινητά.

Ελπίζω αυτό το άρθρο να σας βοηθήσει να καταλάβετε πώς να εργαστείτε με το Fetch API. Φροντίστε να δοκιμάσετε την Ανάκτηση για την επόμενη εφαρμογή ιστού.

Γράφω τακτικά για Μηχανική Εκμάθηση, Ασφάλεια στον κυβερνοχώρο και DevOps. Μπορείτε να εγγραφείτε στο εβδομαδιαίο ενημερωτικό δελτίο μου εδώ.