web-dev-qa-db-fra.com

Gestion des réponses jQuery.ajax continue: "success:" vs ".done"?

Je travaille avec jQuery et AJAX depuis quelques semaines maintenant et j’ai vu deux façons différentes de "continuer" le script une fois l’appel effectué: success: et .done.

Le synopsis de la documentation jQuery nous obtenons:

.done (): Description: ajoutez des gestionnaires à appeler lorsque l'objet différé est résolu.

success: (option .ajax ()): fonction à appeler si la requête aboutit.

Ainsi, les deux font quelque chose après que l'appel AJAX soit terminé/résolu. Puis-je utiliser l'un ou l'autre au hasard? Quelle est la différence et quand l'un est utilisé à la place de l'autre?

ajaxjquery
301
Claudio

success est le nom traditionnel du rappel de réussite dans jQuery, défini comme une option dans l'appel ajax. Cependant, depuis l'implémentation de $.Deferreds et des rappels plus sophistiqués, done est le moyen préféré pour implémenter des rappels de succès, car il peut être appelé sur n'importe quel deferred.

Par exemple, succès:

$.ajax({
  url: '/',
  success: function(data) {}
});

Par exemple, fait:

$.ajax({url: '/'}).done(function(data) {});

La bonne chose à propos de done est que la valeur de retour de $.ajax est maintenant une promesse reportée qui peut être liée à n’importe où dans votre application. Supposons donc que vous souhaitiez faire cet appel ajax à partir de plusieurs endroits différents. Plutôt que de transmettre votre fonction de réussite comme option à la fonction qui effectue cet appel ajax, vous pouvez simplement demander à la fonction de retourner $.ajax lui-même et de lier vos rappels avec done, fail, then, ou autre chose. Notez que always est un rappel qui sera exécuté si la requête aboutit ou échoue. done ne sera déclenché qu'en cas de succès.

Par exemple:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: showLoadingImgFn
  })
  .always(function() {
    // remove loading image maybe
  })
  .fail(function() {
    // handle request failures
  });

}

xhr_get('/index').done(function(data) {
  // do stuff with index data
});

xhr_get('/id').done(function(data) {
  // do stuff with id data
});

Un avantage important de cette facilité de maintenance réside dans le fait que vous avez intégré votre mécanisme ajax dans une fonction spécifique à l’application. Si vous décidez que vous avez besoin que votre appel $.ajax fonctionne différemment à l'avenir, ou si vous utilisez une méthode ajax différente, ou si vous vous éloignez de jQuery, il vous suffit de modifier la définition de xhr_get retourne une promesse ou au moins une méthode done, dans le cas de l'exemple ci-dessus). Toutes les autres références de l'application peuvent rester les mêmes.

Il y a beaucoup plus de choses (beaucoup plus cool) que vous pouvez faire avec $.Deferred, l'une d'entre elles consiste à utiliser pipe pour déclencher une défaillance d'une erreur signalée par le serveur, même lorsque le $.ajax demande elle-même réussit. Par exemple:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .pipe(function(data) {
    return data.responseCode != 200 ?
      $.Deferred().reject( data ) :
      data;
  })
  .fail(function(data) {
    if ( data.responseCode )
      console.log( data.responseCode );
  });
}

xhr_get('/index').done(function(data) {
  // will not run if json returned from ajax has responseCode other than 200
});

En savoir plus sur $.Deferred ici: http://api.jquery.com/category/deferred-object/

NOTE: à compter de jQuery 1.8, pipe est déconseillé en faveur de l'utilisation de then exactement de la même manière.

451
glortho

Si vous avez besoin de async: false dans votre ajax, vous devez utiliser success au lieu de .done. Sinon, vous feriez mieux d'utiliser .done. Ceci est de site officiel de jQuery :

À partir de jQuery 1.8, l'utilisation de async: false avec jqXHR ( $ .Deferred) est déconseillé; vous devez utiliser les options de rappel succès/erreur/complet au lieu de les méthodes correspondantes de l'objet jqXHR telles que jqXHR.done () () .

4
AmirHossein Manian