error - El manejo de jQuery.ajax continúa las respuestas: “éxito:” vs “.done”?

boton ajax jquery

Question

He estado trabajando con jQuery y AJAX durante algunas semanas y vi dos formas diferentes de "continuar" el script una vez que se realizó la llamada: success: y .done .

De la sinopsis de la documentación de jQuery obtenemos:

.done (): Descripción: Agregue controladores para llamar cuando se resuelva el objeto diferido.

success: (.ajax () option): Una función a ser llamada si la solicitud tiene éxito.

Entonces, ambos hacen algo después de que la llamada AJAX se haya completado / resuelto. ¿Puedo usar uno u otro al azar? ¿Cuál es la diferencia y cuándo se usa uno en lugar del otro?

Answer 1

Si necesita async: false en su ajax, debe usar el success lugar de .done . De lo contrario es mejor usar .done . Esto es del sitio oficial de jQuery :

A partir de jQuery 1.8, el uso de async: false con jqXHR ($ .Deferred) está en desuso; debe utilizar las opciones de devolución de llamada exitosa / error / completa en lugar de los métodos correspondientes del objeto jqXHR, como jqXHR.done () .

Answer 2

success ha sido el nombre tradicional de la devolución de llamada de éxito en jQuery, definida como una opción en la llamada ajax. Sin embargo, desde la implementación de $.Deferreds y las devoluciones de llamada más sofisticadas, la forma preferida de implementar devoluciones de llamada exitosas, ya que se puede solicitar en cualquier deferred .

Por ejemplo, el éxito:

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

Por ejemplo, hecho:

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

Lo bueno de done es que el valor de retorno de $.ajax ahora es una promesa diferida que puede vincularse a cualquier otra parte de su aplicación. Así que digamos que quieres hacer esta llamada ajax desde diferentes lugares. En lugar de pasar su función de éxito como una opción a la función que realiza esta llamada ajax, puede hacer que la función devuelva $.ajax sí misma y vincular sus devoluciones de llamada con done , fail , then o lo que sea. Tenga en cuenta que always es una devolución de llamada que se ejecutará si la solicitud se realiza correctamente o no. done solo se activará en el éxito.

Por ejemplo:

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 beneficio importante de esto en términos de mantenibilidad es que ha envuelto su mecanismo ajax en una función específica de la aplicación. Si decide que necesita su llamada $.ajax para operar de manera diferente en el futuro, o utiliza un método ajax diferente, o se aleja de jQuery, solo tiene que cambiar la definición xhr_get (asegúrese de devolver una promesa o al menos Un método done , en el caso del ejemplo anterior). Todas las demás referencias en toda la aplicación pueden seguir siendo las mismas.

Hay muchas más cosas (mucho más $.Deferred ) que puede hacer con $.Deferred , una de las cuales es usar una pipe para desencadenar una falla en un error reportado por el servidor, incluso cuando la solicitud $.ajax se realiza correctamente. Por ejemplo:

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
});

Lea más sobre $.Deferred aquí: http://api.jquery.com/category/deferred-object/

NOTA : A partir de jQuery 1.8, la pipe ha quedado en desuso a favor de usarla exactamente de la misma manera.