Το Ajax και το Fetch είναι και οι δύο τεχνικές στο JavaScript που χρησιμοποιούνται για την αποστολή αιτημάτων από τον πελάτη στον διακομιστή για λήψη δεδομένων, αλλά υπάρχουν ορισμένες σημαντικές διαφορές μεταξύ τους. Ακολουθεί μια λεπτομερής σύγκριση των δύο τεχνολογιών:
1. Τεχνική βάση και μέθοδοι υλοποίησης
Αϊάς：
Βάση: Το Ajax σημαίνει Asynchronous JavaScript και XML (asynchronous JavaScript and XML) Είναι μια τεχνολογία που μπορεί να ενημερώσει μέρος μιας ιστοσελίδας χωρίς να φορτώσει ξανά ολόκληρη τη σελίδα.
Μέθοδος υλοποίησης : Ο Ajax συνήθως χρησιμοποιεί το αντικείμενο XMLHttpRequest για την επεξεργασία αιτημάτων και απαντήσεων. Η σύνταξη αυτής της μεθόδου είναι σχετικά πολύπλοκη και χρειάζεται να γραφεί περισσότερος κώδικας για να χειριστεί τις συναρτήσεις και τις καταστάσεις επανάκλησης.
Φέρω：
Βάση: Το Fetch είναι ένα API στη σύγχρονη JavaScript που παρέχει έναν κοινό ορισμό των αντικειμένων αιτήματος και απόκρισης για την επεξεργασία αιτημάτων δικτύου.
Μέθοδος υλοποίησης : Το Fetch χρησιμοποιεί αντικείμενα Promise για να χειριστεί ασύγχρονες λειτουργίες και μπορεί να κληθεί σε αλυσίδες, κάνοντας τον κώδικα πιο κατανοητό και πιο εύκολο στη διατήρηση. Το στυλ API του Fetch είναι πιο συνοπτικό και ισχυρό.
2. Ασύγχρονη επεξεργασία και στυλ κωδικοποίησης
Αϊάς：
Ασύγχρονη επεξεργασία: Ο Ajax χρησιμοποιεί συναρτήσεις επανάκλησης για να χειριστεί ασύγχρονες λειτουργίες, οι οποίες μπορεί να οδηγήσουν σε προβλήματα κόλασης επανάκλησης, ειδικά σε σύνθετες αλυσίδες αιτημάτων.
στυλ κωδικοποίησης: Το στυλ κωδικοποίησης του Ajax είναι σχετικά παραδοσιακό και απαιτεί χειροκίνητο χειρισμό πολλών πτυχών αιτημάτων και απαντήσεων.
Φέρω：
Ασύγχρονη επεξεργασία : Το Fetch χρησιμοποιεί αντικείμενα Promise για να χειριστεί ασύγχρονες λειτουργίες, γεγονός που καθιστά τον χειρισμό ασύγχρονων αιτημάτων πιο ευέλικτο και συνοπτικό. Μπορείτε να χρησιμοποιήσετε το async/wait για να γράψετε καθαρό ασύγχρονο κώδικα και να αποφύγετε το πρόβλημα της κόλασης της επανάκλησης.
στυλ κωδικοποίησης: Το στυλ κώδικα του Fetch είναι πιο μοντέρνο και συνοπτικό, είναι εύκολο να κατανοηθεί και να διατηρηθεί.
3. Αιτήματα μεταξύ τομέων και CORS
Αϊάς：
αίτημα μεταξύ τομέων : Τα αιτήματα Ajax μπορούν να καλύπτουν διαφορετικά ονόματα τομέα, αλλά τα ζητήματα CORS (Κοινή χρήση πόρων μεταξύ προέλευσης) πρέπει να αντιμετωπίζονται κατάλληλα. Ο Ajax μπορεί να κάνει αιτήματα μεταξύ τομέων μέσω τεχνολογιών όπως το JSONP και οι διακομιστές μεσολάβησης.
Φέρω：
αίτημα μεταξύ τομέων : Το Fetch έχει αυστηρότερους περιορισμούς στα αιτήματα μεταξύ τομέων, επειδή ακολουθεί την ίδια πολιτική προέλευσης. Εάν απαιτούνται αιτήματα μεταξύ τομέων, πρέπει να οριστούν οι κατάλληλες κεφαλίδες CORS στην πλευρά του διακομιστή για να επιτρέπονται αιτήματα μεταξύ τομέων. Τα αιτήματα ανάκτησης μπορούν να χειριστούν αυτόματα ζητήματα CORS, αλλά ενδέχεται να απαιτούν πρόσθετη διαμόρφωση σε ορισμένες περιπτώσεις.
4. Άλλα χαρακτηριστικά
Αϊάς：
ευκαμψία: Ο Ajax μπορεί να προσαρμόσει τις κεφαλίδες αιτημάτων, τα σώματα αιτημάτων, τις μορφές απόκρισης κ.λπ., παρέχοντας υψηλή ευελιξία.
συμβατότητα: Το Ajax μπορεί να έχει προβλήματα συμβατότητας σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης, αλλά με τη δημοτικότητα των σύγχρονων προγραμμάτων περιήγησης, αυτό το πρόβλημα έχει βελτιωθεί σημαντικά.
Φέρω：
Συνοδεύεται από επεξεργασία χρονικού ορίου: Το Fetch μπορεί να διακόψει αυτόματα το αίτημα μετά τη λήξη του χρόνου αιτήματος, αποφεύγοντας τη μεγάλη αναμονή.
χειρισμός απόκρισης: Το Fetch παρέχει πληθώρα μεθόδων για την επεξεργασία δεδομένων απόκρισης, όπως .json(), .text(), .blob(), κ.λπ., καθιστώντας πιο βολική την επεξεργασία των δεδομένων απόκρισης.
χρήση
fetch Είναι ένα σύγχρονο και ισχυρό API αιτήματος δικτύου σε JavaScript, το οποίο παρέχει έναν απλό και λογικό τρόπο για να αποκτήσετε πόρους ασύγχρονα σε όλο το δίκτυο.fetch Επιστροφή αPromise , που το καθιστά εύκολο στη χρήση με τη σύνταξη ασυγχρονισμού/αναμονής της JavaScript. Ακολουθούν μερικά βασικά παραδείγματα χρήσης:
