2020-05-24——La différence entre ajax, axios et fetch

1. jquery ajax

   $.ajax({   type: 'POST',   url: url,   data: data,   dataType: dataType,   success: function () {},   error: function () {}});<br>

Ajax traditionnel fait référence à XMLHttpRequest (XHR), la première technologie de requête back-end apparue, appartenant au js original, et au noyau utilise l'objet XMLHttpRequest, s'il existe une relation de séquence entre plusieurs requêtes, un enfer de rappel se produira.

JQuery ajax est une encapsulation de XHR natif. De plus, il ajoute également la prise en charge de JSONP. Après des années de mise à jour et de maintenance, c'est vraiment très pratique Inutile de dire les avantages ; si je devais lister quelques inconvénients, ce ne seraient peut-être que :
1 Il est conçu pour la programmation MVC et n'est pas conforme à la programmation MVC. front-end actuel. La vague de MVVM
2. Basée sur le développement natif de XHR, l'architecture de XHR elle-même n'est pas claire.
3. L'ensemble du projet JQuery est trop gros, et il est très déraisonnable d'introduire l'intégralité de JQuery juste pour utiliser ajax (il adopte une solution de packaging personnalisée et ne peut pas profiter des services CDN)
4. les principes de séparation des préoccupations (Separation of Concerns)
5. Les méthodes de configuration et d'appel sont très déroutantes et le modèle asynchrone basé sur les événements n'est pas convivial.

PS : MVVM (Model-View-ViewModel), dérivé du modèle classique Model–View–Controller (MVC). L'émergence de MVVM favorise la séparation du développement frontal de l'interface graphique et de la logique métier back-end, améliorant considérablement l'efficacité du développement front-end. Le cœur de MVVM est la couche ViewModel, qui est comme une station de transfert (convertisseur de valeur), chargée de convertir les objets de données dans le modèle pour rendre les données plus faciles à gérer et à utiliser. Cette couche effectue une liaison de données bidirectionnelle vers le haut avec le modèle. couche de vue et à La couche inférieure interagit avec la couche Modèle via des requêtes d'interface pour les données, qui servent de lien entre les couches supérieure et inférieure. La couche View n'affiche pas les données de la couche Model, mais les données du ViewModel. Le ViewModel est chargé d'interagir avec la couche Model. Cela découple complètement la couche View et la couche Model. Ce découplage est crucial. et back-ends. La partie la plus importante de la mise en œuvre du plan.

2.axios

axios({ méthode : 'post', url : '/user/12345', données : { firstName : 'Fred', lastName : 'Flintstone' }}).then(function (response) { console.log(response); }).catch(function (error) { console.log(error);});<code>    axios({    method: 'post',    url: '/user/12345',    data: {        firstName: 'Fred',        lastName: 'Flintstone'    }}).then(function (response) {    console.log(response);}).catch(function (error) {    console.log(error);});<br>

Après Vue2.0, You Yuxi recommande à tout le monde d'utiliser axios pour remplacer JQuery ajax, Vraisemblablement, laissez axios entrer dans les yeux de nombreuses personnes.
axios est un client HTTP basé sur Promise pour les navigateurs et nodejs. Il s'agit essentiellement d'une encapsulation de XHR natif, sauf qu'il s'agit d'une version d'implémentation de Promise et est conforme aux dernières spécifications ES : 1. Créez XMLHttpRequest à partir du navigateur
2. Prise en charge de l'API Promise
3 Le client prend en charge la prévention de CSRF
4 Fournit certaines interfaces pour les requêtes simultanées (important, facilite de nombreuses opérations)
5. Requête http de node.js
6. Intercepter la requête et la réponse
7. Convertir les données de requête et de réponse
8 Annuler la requête
9. Convertir automatiquement les données JSON

PS : empêcher CSRF : chacune de vos demandes porte une clé obtenue à partir du cookie. Selon la politique de même origine du navigateur, le faux site Web ne peut pas obtenir la clé de votre cookie. De cette façon, le contexte vous permet de savoir facilement si la demande est trompeuse. entrée d’un utilisateur sur un faux site Web, afin que vous puissiez adopter la bonne stratégie.

3. récupérer

try { let réponse = wait fetch(url); let data = réponse.json(); console.log(data);} catch(e) { console.log("Oups, erreur", e);}<p> </p>    try {  let response = await fetch(url);  let data = response.json();  console.log(data);} catch(e) {  console.log("Oops, error", e);}<br>Fetch est connu pour remplacer AJAX. Il est apparu dans ES6 et utilise l'objet promise dans ES6. Fetch est conçu sur la base de promesses. La structure du code de Fetch est beaucoup plus simple que celle d'ajax, et les paramètres ressemblent un peu à ceux de jQuery ajax. Cependant, vous devez vous rappeler que fetch n'est pas une encapsulation supplémentaire d'ajax, mais du js natif, qui n'utilise pas l'objet XMLHttpRequest.

Avantages de la récupération :
1. Il est conforme à la séparation des préoccupations et ne mélange pas les entrées, les sorties et les statuts suivis par les événements dans un seul objet
2. Une manière d'écrire meilleure et plus pratique Franchement, les raisons ci-dessus ne me convainquent pas du tout, car Jquery et Axios nous ont assez bien aidés à empaqueter xhr et il est assez pratique à utiliser. Pourquoi devons-nous encore consacrer beaucoup d'efforts pour apprendre à récupérer ?
Je pense que les principaux avantages de fetch sont :

1. Syntaxe simple, plus sémantique 2. Basé sur l'implémentation standard de Promise, prenant en charge async/await3. ://github.com/matthew-andrews/isomorphic-fetch) 4. Il est de niveau inférieur et fournit des API riches (requête, réponse) 5. Il est séparé de XHR et constitue une nouvelle méthode d'implémentation dans la spécification ES

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!