miércoles, 1 de junio de 2016

El objeto .derrefed() en jQuery

EL objeto deferred() se utiliza cuando tenemos una llamada asíncrona en jQuery principalmente en AJAX.

Cuando haces una solicitud por medio de AJAX, la información no necesariamente llega junta, puede llegar en bloques, es decir, por partes.

Si quieres procesar la información, puedes meter toda el código dentro de la función de callback, pero jQuery tiene una forma más elegante de solucionar este problema.

Por ejemplo, el método .get() de jQuery tiene la siguiente sintaxis:

jQuery.get( url [, data ] [, success ] [, dataType ] );

La función de callback que se lanza en success recibe tres parámetros:

Function( PlainObject data, String textStatus, jqXHR jqXHR )

El primero son los datos en forma de un objeto "variable, valor". El segundo es una cadena con el estado del proceso y el tercero es un objeto con información adicional a la lectura del objeto XMLHttpRequest.

Para manejar el proceso asíncrono en AJAX, tendremos el modelo deferred/promise, donde deferred es tan solo un objeto. La promesa (promise) es la instancia del objeto que puede esperar  la llegada de datos de una petición asíncrona o el fin del procesamiento de todos los datos obtenidos en una función asíncrona.

Un objeto promise es una instancia de solo lectura de un objeto deferred.

Un objeto deferred inicia con un estado "pendiente" o "pending" y puede cambiar a "resuelto" o "rechazado". Una vez que ha cambiado de estado, ya no puede modificarse.

 A una "promesa" puedes asociarle cualquier cantidad de funciones por medio de los métodos done(), fail() y always().

También podemos utilizar una estructura del tipo:

promesa.then(callbackDone, callbackFail, progressFilter);

Una función asociada por medio del método done() de una promesa que a su vez está asociada a un método get(), recibe como parámetro los datos leídos del proceso asíncrono.

Si quieres asociar varias promesas, puedes utilizar la siguiente estructura:

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );

También se puede utilizar con el método done():

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});

d1.resolve( "Fish" );
d2.resolve( "Pizza" );




Fuentes:

https://api.jquery.com/jQuery.Deferred/
https://api.jquery.com/category/deferred-object/
https://api.jquery.com/jquery.when/
https://api.jquery.com/deferred.promise/



1 comentario: