web-dev-qa-db-fra.com

Quelles sont les différences dans l'utilisation d'Axios par rapport à jQuery pour les requêtes HTTP?

Je suis un utilisateur de jQuery depuis toujours. Mais maintenant, je construis ma première API qui utilise JWT pour l'authentification. Cela dit, la plupart des didacticiels que je trouve en ligne pour consommer cette API avec des en-têtes d'authentification utilisent Axios pour effectuer ces demandes.

J'utilise déjà jQuery sur le projet, donc, j'aimerais faire des appels ajax jQuery simples, mais je ne suis pas sûr qu'il y ait des inconvénients majeurs à l'utiliser.

Ce serait mon code jQuery:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

Envoyer la demande

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

Après avoir lu les fonctionnalités d'Axios, la dernière est: Prise en charge côté client pour la protection contre XSRF. JQuery ajax ne prend-il pas en charge cela? Dois-je faire quelque chose de plus pour réaliser cette protection? Y a-t-il autre chose qui vaut la peine d'utiliser une autre bibliothèque comme Axios au lieu de jQuery?

javascriptjqueryajax
22
raphadko

Je ne vois aucun support explicite pour cela dans la documentation jQuery $.ajax. Cela étant dit, c'est quelque chose que vous pourriez faire avec le paramètre beforeSend. Dans le beforeSend, vous modifieriez le jqHXR pour inclure vos informations XSRF.

@charlietfl a mentionné que vous pouvez également le faire dans global ajaxSend() afin qu'il soit appliqué à toutes les instances de $.ajax()

C'est ce que axios fait:

  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

Si vous utilisez déjà jQuery dans votre projet et que vous pouvez gérer vous-même le XSRF, utilisez $.ajax().

"Y a-t-il autre chose qui vaut la peine d'utiliser une autre bibliothèque comme Axios au lieu de jQuery?"

Je dirais très certainement. Une bibliothèque dédiée à la gestion de http dissocie le processus de votre framework d'application ou bibliothèque de présentation.

7
Kyle Richardson

L'ajout de la prise en charge de CSRF (XSRF) dans jquery est aussi simple que l'ajout des lignes suivantes à votre page après le chargement de jquery (avec votre jeton rendu dans une balise META sur votre page):

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

J'ai trouvé (dans le passé) qu'Axios est plus problématique que cela ne vaut. Des procédures simples, telles que l'exécution d'une demande GET pour demander une liste de ressources, la modification d'un élément de la liste avec une demande POST/PUT/DELETE, puis une nouvelle demande de la liste (pour synchroniser la vue) entraînent le traitement des données mises en cache, ce qui signifie la vue ne change pas. Ce n'est qu'un exemple.

Edit: Je travaille actuellement sur un projet Vue.js, et je me suis souvenu de quelques autres raisons pour lesquelles je suis resté avec jquery sur axios:

Il convient de noter que si vous utilisez bootstrap ou quelque chose de similaire, vous avez déjà inclus jquery, alors pourquoi inclure une deuxième bibliothèque?

Et enfin, j'utilise un script simple qui convertit n'importe quel formulaire html standard en un formulaire de soumission ajax simplement en ajoutant quelques classes et une alerte bootstrap pour afficher les erreurs. Il est destiné à être utilisé avec laravel et (facultativement) Vue.js. C'est vraiment pratique car il gère le style des composants du formulaire pour dire à l'utilisateur ce qui se passe. Pour le débogage des erreurs côté serveur, vous pouvez simplement supprimer la classe "ajax-submit" du formulaire et elle reviendra à la soumission de formulaire standard. Les opérations annexes du script sont implémentées le plus simplement à l'aide de jQuery. J'ai mettez-le dans un Gist ici . J'espère que quelqu'un le trouvera utile.

Je serais en fait très intéressé de voir à quel point il est difficile de créer un script équivalent en utilisant Axios, et en excluant jQuery

Édition supplémentaire: Je viens de supprimer Axios d'un autre projet. Il s'agit d'une application PWA et Axios n'a pas d'option pour utiliser l'API fetch qui est requise pour une utilisation avec les travailleurs du service. J'ai créé un Gist pour remplacer Axios par fetch ici. Peut-être que cela sera utile à quelqu'un.

0
mp035