Πώς να χρησιμοποιήσετε το Fetch για να πραγματοποιήσετε κλήσεις AJAX σε JavaScript

Θα μοιραστώ τακτικά μαθήματα σχετικά με το JavaScript σε αυτήν τη σειρά. Θα καλύψουμε τις βασικές αρχές του JS, τα προγράμματα περιήγησης, το DOM, το σχεδιασμό συστήματος, την αρχιτεκτονική τομέα και τα πλαίσια.

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

const promise = fetch(url, [options]) 

Η κλήση ανάκτησης επιστρέφει μια υπόσχεση, με ένα αντικείμενο απόκρισης. Η υπόσχεση απορρίπτεται εάν υπάρχει σφάλμα δικτύου και επιλύεται εάν δεν υπάρχει πρόβλημα σύνδεσης με το διακομιστή και ο διακομιστής απάντησε έναν κωδικό κατάστασης. Αυτός ο κωδικός κατάστασης μπορεί να είναι 200s, 400s ή 500s.

Ένα δείγμα αίτησης FETCH -

 fetch(url) .then(response => response.json()) .catch(err => console.log(err)) 

Το αίτημα αποστέλλεται ως GET από προεπιλογή. Για να στείλετε ένα POST / PATCH / DELETE / PUT μπορείτε να χρησιμοποιήσετε την ιδιότητα μεθόδου ως μέρος της optionsπαραμέτρου. Κάποιες άλλες πιθανές τιμές optionsμπορούν να πάρουν -

  • method: όπως GET, POST, PATCH
  • headers: Αντικείμενο κεφαλίδων
  • mode: Όπως cors, no-cors,same-origin
  • cache: λειτουργία προσωρινής μνήμης για αίτημα
  • credentials
  • body

Δείτε την πλήρη λίστα των διαθέσιμων επιλογών εδώ

Παράδειγμα χρήσης:

Αυτό το παράδειγμα δείχνει τη χρήση της λήψης για την κλήση ενός API και τη λήψη μιας λίστας αποθετηρίων git.

const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) 

Για να στείλετε ένα αίτημα POST, δείτε πώς μπορεί να χρησιμοποιηθεί η παράμετρος μεθόδου με τη σύνταξη async / wait.

const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json(); 

Ενδιαφέρεστε για περισσότερα JSBytes; Εγγραφείτε για το ενημερωτικό δελτίο