1.jQuery ajax
L’Ajax traditionnel fait référence à XMLHttpRequest(XHR), la toute première technologie de requête back-end apparue dans le js original, et le cœur utilise l’objet XMLHttpRequest.
JQuery ajax est une encapsulation du XHR natif et ajoute la prise en charge du JSONP. Après des années de mises à jour et d’entretien, il est vraiment très pratique, et il n’y a pas besoin d’en dire les avantages ; Si vous insistez pour énumérer quelques défauts, il se peut que ce ne soit que :
1. Il s’agit d’une programmation pour MVC, qui ne correspond pas à la vague actuelle de MVVM front-end
2. Sur la base du développement natif XHR, l’architecture elle-même de XHR n’est pas claire.
3. L’ensemble du projet JQuery est trop volumineux, et il est très déraisonnable d’introduire tout le JQuery uniquement en utilisant ajax (adopter une solution d’emballage personnalisée et ne pas bénéficier des services CDN)
4. Elle ne respecte pas le principe de séparation des intérêts
5. La configuration et l’invocation sont très confuses, et le modèle asynchrone basé sur les événements n’est pas convivial.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Comme le montre la figure suivante :
2. axios
Après Vue2.0, You Yuxi a recommandé de remplacer JQuery ajax par des axios, ce qui a dû faire entrer les axios dans l’attention de beaucoup de gens.
Axios est un client HTTP basé sur Promises pour navigateurs et NODEJS, qui est essentiellement une encapsulation du XHR natif, sauf qu’il s’agit d’une implémentation de Promises conforme aux dernières spécifications ES, et qu’il possède lui-même les caractéristiques suivantes :
1. Créez une requête XMLHttp depuis votre navigateur
2. API de promesse de support
3. Le support client empêche le CSRF
4. Fournir des interfaces pour les requêtes concurrentes (fonctionnement important et bien plus pratique)
5. Créer une requête HTTP à partir de node.js
6. Intercepter les requêtes et réponses
7. Transformation des données de requête et de réponse
8. Annulation de la demande
9. Convertir automatiquement les données JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. rapporter
Fetch est présenté comme une alternative à AJAX, qui est apparu dans ES6 et utilise l’objet promise dans ES6. Le Fetch est conçu sur la base de promesses. La structure de code de Fetch est bien plus simple que celle d’ajax, et les paramètres ressemblent un peu à ceux de jQuery ajax. Cependant, n’oubliez pasFetch n’est pas une encapsulation supplémentaire d’ajax, mais de JS natif et n’utilise pas l’objet XMLHttpRequest。
Avantages de la récupération :
1. Respecter la séparation de focus et ne pas mélanger entrées, sorties et états suivis par les événements dans un seul objet
2. Meilleure et plus pratique façon d’écrire
Franchement, les raisons ci-dessus ne me convaincent pas du tout, car Jquery et Axios nous ont tous deux aidé à encapsuler xhr suffisamment bien et sont assez faciles à utiliser, pourquoi doit-on encore faire autant d’efforts pour apprendre à récupérer ?
Je pense que les principaux avantages de la collecte sont :
1. La syntaxe est concise et plus sémantique
2. Basé sur la mise en œuvre standard de promesse, support async/await
3. Commodité isomorphe, en utilisant [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Plus bas, fournir des API riches (requête, réponse)
5. Se détacher de XHR est une nouvelle implémentation dans la spécification ES
Fetch est une API de bas niveau que l’on peut considérer comme un XHR natif, donc ce n’est pas très confortable à utiliser et il faut l’encapsuler.
Par exemple:
1) la récupération ne rapporte que les erreurs pour les requêtes réseau, et considère les requêtes 400 et 500 comme réussies, et le serveur ne rejettera pas les erreurs de 400 ou 500 codes d’erreur.
2) fetch ne transporte pas les cookies par défaut, vous devez ajouter un élément de configuration : fetch(url, {credentials : 'include'})
3) Fetch ne prend pas en charge l’abandon, ne prend pas en charge le contrôle de timeout, et le contrôle de timeout implémenté par setTimeout et Promise.reject ne peut empêcher le processus de requête de continuer à s’exécuter en arrière-plan, ce qui entraîne un trafic gaspillé
4) Fetch n’a aucun moyen de suivre nativement l’avancement des requêtes, tandis que XHR le peut
|
Publié sur 16/05/2019 13:28:28
|
|
|
|
Publié sur 17/05/2019 18:16:39
|
Propriétaire