1.jΕρώτημα ajax
Το παραδοσιακό Ajax αναφέρεται στο XMLHttpRequest(XHR), την παλαιότερη τεχνολογία αιτημάτων back-end που εμφανίστηκε στο αρχικό js, και ο πυρήνας χρησιμοποιεί το αντικείμενο XMLHttpRequest.
Το JQuery ajax είναι μια ενθυλάκωση του εγγενούς XHR και προσθέτει υποστήριξη για το JSONP. Μετά από χρόνια ενημέρωσης και συντήρησης, είναι πραγματικά πολύ βολικό και τα πλεονεκτήματα δεν χρειάζεται να ειπωθούν. Εάν επιμένετε να αναφέρετε μερικές ελλείψεις, μπορεί να είναι μόνο:
1. Είναι προγραμματισμός για MVC, το οποίο δεν συμμορφώνεται με το τρέχον κύμα του front-end MVVM
2. Με βάση την εγγενή ανάπτυξη XHR, η ίδια η αρχιτεκτονική του XHR δεν είναι σαφής.
3. Ολόκληρο το έργο JQuery είναι πολύ μεγάλο και είναι πολύ παράλογο να εισαχθεί ολόκληρο το JQuery χρησιμοποιώντας μόνο ajax (υιοθετώντας μια εξατομικευμένη λύση συσκευασίας και δεν απολαμβάνετε υπηρεσίες CDN)
4. Δεν συνάδει με την αρχή του διαχωρισμού των ανησυχιών
5. Η διαμόρφωση και η επίκληση είναι πολύ συγκεχυμένες και το ασύγχρονο μοντέλο που βασίζεται σε συμβάντα δεν είναι φιλικό.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Όπως φαίνεται στο παρακάτω σχήμα:
2. Αξιός
Μετά το Vue2.0, ο You Yuxi συνέστησε να αντικαταστήσετε το JQuery ajax με το axios, το οποίο πρέπει να έκανε το axios να μπει στα μάτια πολλών ανθρώπων.
Το axios είναι ένας πελάτης HTTP που βασίζεται σε υποσχέσεις για προγράμματα περιήγησης και κόμβους, ο οποίος είναι ουσιαστικά μια ενθυλάκωση του εγγενούς XHR, εκτός από το ότι είναι μια εφαρμογή υποσχέσεων που συμμορφώνεται με τις πιο πρόσφατες προδιαγραφές ES και η ίδια έχει τα ακόλουθα χαρακτηριστικά:
1. Δημιουργήστε ένα XMLHttpRequest από το πρόγραμμα περιήγησής σας
2. Υποστήριξη API υπόσχεσης
3. Η υποστήριξη πελατών αποτρέπει το CSRF
4. Παρέχετε ορισμένες διεπαφές για ταυτόχρονα αιτήματα (σημαντική, πολύ πιο βολική λειτουργία)
5. Δημιουργήστε ένα αίτημα HTTP από node.js
6. Υποκλοπή αιτημάτων και απαντήσεων
7. Μεταμορφώστε τα δεδομένα αιτημάτων και απαντήσεων
8. Ακύρωση του αιτήματος
9. Αυτόματη μετατροπή δεδομένων JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. Φέρτε
Το Fetch χρεώνεται ως εναλλακτική λύση στο AJAX, το οποίο εμφανίστηκε στο ES6 και χρησιμοποιεί το αντικείμενο υπόσχεσης στο ES6. Το Fetch έχει σχεδιαστεί με βάση τις υποσχέσεις. Η δομή κώδικα του Fetch είναι πολύ πιο απλή από το ajax και οι παράμετροι μοιάζουν λίγο με το jQuery ajax. Ωστόσο, φροντίστε να θυμάστεΤο fetch δεν είναι μια περαιτέρω ενθυλάκωση του ajax, αλλά εγγενές js και δεν χρησιμοποιεί το αντικείμενο XMLHttpRequest。
Πλεονεκτήματα της ανάκτησης:
1. Συμμορφωθείτε με τον διαχωρισμό εστίασης και μην αναμιγνύετε εισόδους, εξόδους και καταστάσεις που παρακολουθούνται από συμβάντα σε ένα αντικείμενο
2. Καλύτερος και πιο βολικός τρόπος γραφής
Ειλικρινά, οι παραπάνω λόγοι δεν με πείθουν καθόλου, επειδή τόσο το Jquery όσο και το Axios μας βοήθησαν να ενσωματώσουμε το xhr αρκετά καλά και είναι αρκετά εύκολο στη χρήση, γιατί πρέπει ακόμα να ξοδέψουμε πολλή προσπάθεια για να μάθουμε το fetch;
Νομίζω ότι τα κύρια πλεονεκτήματα του fetch είναι:
1. Η σύνταξη είναι συνοπτική και πιο σημασιολογική
2. Με βάση την τυπική εφαρμογή υπόσχεσης, υποστήριξη ασύγχρονης/αναμονής
3. Ισομορφική ευκολία, χρησιμοποιώντας [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Περισσότερο κατώτατο επίπεδο, παρέχοντας πλούσια API (αίτημα, απάντηση)
5. Η απομάκρυνση από το XHR είναι μια νέα εφαρμογή στην προδιαγραφή ES
Το fetch είναι ένα API χαμηλού επιπέδου που μπορείτε να σκεφτείτε ως εγγενές XHR, επομένως δεν είναι τόσο άνετο στη χρήση και πρέπει να ενθυλακωθεί.
Για παράδειγμα:
1) Το Fetch αναφέρει μόνο σφάλματα για αιτήματα δικτύου και αντιμετωπίζει τα 400 και 500 ως επιτυχημένα αιτήματα και ο διακομιστής δεν θα απορρίψει κατά την επιστροφή 400 ή 500 κωδικών σφάλματος.
2) Το fetch δεν φέρει cookies από προεπιλογή, πρέπει να προσθέσετε ένα στοιχείο διαμόρφωσης: fetch(url, {credentials: 'include'})
3) Το fetch δεν υποστηρίζει ματαίωση, δεν υποστηρίζει έλεγχο χρονικού ορίου και το στοιχείο ελέγχου χρονικού ορίου που εφαρμόζεται από το setTimeout και το Promise.reject δεν μπορεί να εμποδίσει τη συνέχιση της εκτέλεσης της διαδικασίας αίτησης στο παρασκήνιο, με αποτέλεσμα τη σπατάλη κίνησης
4) Το fetch δεν έχει τρόπο να παρακολουθεί εγγενώς την πρόοδο των αιτημάτων, ενώ το XHR μπορεί
|
Δημοσιεύτηκε στις 16/5/2019 1:28:28 μ.μ.
|
|
|
|
Δημοσιεύτηκε στις 17/5/2019 6:16:39 μ.μ.
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 20/2/2025 10:08:01 π.μ.
|
