Comprensión de los objetos Deferred
Comprenda los conceptos fundamentales de los objetos Deferred de jQuery, cómo representan operaciones asíncronas y cuáles son sus estados (pending, resolved y rejected).
Comprensión de los objetos Deferred es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Operaciones asíncronas y callbacks
En el desarrollo web, muchas tareas no ocurren al instante. Piense en obtener datos de un servidor o esperar a que un usuario haga clic. Estas son operaciones asíncronas.
Tradicionalmente, usaríamos callbacks: funciones que se ejecutan únicamente después de que termina una tarea asíncrona. Sin embargo, los callbacks anidados pueden provocar un «callback hell», lo que dificulta la lectura y el mantenimiento del código.
Conozca jQuery Deferred
¡Aquí es donde los objetos Deferred de jQuery acuden al rescate! Un objeto Deferred es una forma eficaz de gestionar las operaciones asíncronas de manera más ordenada.
Actúa como un marcador de posición para un resultado futuro. Puede asociarle funciones que se ejecutarán cuando termine la operación, tanto si tiene éxito como si falla, sin bloquear el código principal.
Los tres estados de Deferred
Un objeto Deferred puede encontrarse en uno de tres estados, que reflejan el estado de la tarea asíncrona que representa:
- Pendiente: El estado inicial. La operación aún no ha terminado.
- Resuelto: La operación ha finalizado correctamente.
- Rechazado: La operación ha fallado o ha encontrado un error.
Una vez resuelto o rechazado, el estado de un objeto Deferred no puede volver a cambiar.
Crear un objeto Deferred
Puede crear un objeto Deferred mediante $.Deferred(). Este objeto comienza en el estado pending.
Proporciona métodos para cambiar su estado y registrar funciones de callback que se ejecutarán cuando cambie dicho estado.
Pruebe a crear uno:
var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));Indicar éxito: .resolve()
Cuando la operación asíncrona finaliza correctamente, debe llamar al método .resolve() del objeto Deferred.
Esto cambia su estado de pending a resolved. Los argumentos que pase a .resolve() se transmitirán a los callbacks de éxito.
Observe el cambio de estado:
var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());
setTimeout(function() {
myDeferred.resolve('Data fetched!');
console.log('New state: ' + myDeferred.state());
}, 1000);Indicar fallo: .reject()
Si la operación asíncrona falla, debe llamar al método .reject().
Esto cambia el estado de Deferred de pending a rejected. Los argumentos que pase a .reject() se enviarán a los callbacks de fallo, normalmente como mensajes de error.
Observe cómo funciona el rechazo:
var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());
setTimeout(function() {
myDeferred.reject('Network error!');
console.log('New state: ' + myDeferred.state());
}, 1000);Gestionar el éxito con .done()
Para reaccionar ante una operación correcta (cuando Deferred está resolved), puede asociar una función de callback mediante el método .done().
Esta función se ejecutará únicamente si se llama a .resolve() y recibirá los argumentos que se hayan pasado a .resolve().
Vamos a procesar algunos datos:
var fetchData = function() {
var dfd = $.Deferred();
setTimeout(function() {
var success = true; // Simulate success
if (success) {
dfd.resolve('User data loaded.');
} else {
dfd.reject('Failed to load user data.');
}
}, 1000);
return dfd;
};
fetchData().done(function(message) {
console.log('Success handler: ' + message);
});Gestionar los fallos con .fail()
Del mismo modo, para gestionar los errores (cuando Deferred está rejected), debe usar el método .fail().
La función de callback que se pase a .fail() se ejecutará únicamente si se llama a .reject() y recibirá sus argumentos.
Vamos a simular un error:
var fetchData = function() {
var dfd = $.Deferred();
setTimeout(function() {
var success = false; // Simulate failure
if (success) {
dfd.resolve('User data loaded.');
} else {
dfd.reject('Failed to load user data.');
}
}, 1000);
return dfd;
};
fetchData().fail(function(errorMessage) {
console.log('Error handler: ' + errorMessage);
});Ejecutar siempre: .always()
A veces, hay código que debe ejecutarse independientemente de que la operación asíncrona tenga éxito o falle. Para eso sirve .always().
La función de callback asociada mediante .always() se ejecutará tanto si Deferred está resolved como si está rejected.
Use .always() para tareas de limpieza o actualizaciones finales de la interfaz:
var fetchData = function(shouldSucceed) {
var dfd = $.Deferred();
setTimeout(function() {
if (shouldSucceed) {
dfd.resolve('Data received!');
} else {
dfd.reject('Request failed!');
}
}, 1000);
return dfd;
};
fetchData(false)
.done(function(msg) { console.log('Success: ' + msg); })
.fail(function(err) { console.log('Failure: ' + err); })
.always(function() { console.log('Operation finished.'); });Proteger con .promise()
Cuando devuelve un objeto Deferred desde una función, es posible que no quiera que el código externo pueda cambiar su estado (por ejemplo, llamar directamente a .resolve() o .reject()).
El método .promise() devuelve una versión «de solo lectura» del objeto Deferred. Solo expone métodos para asociar callbacks (como .done(), .fail() y .always()), pero no para cambiar su estado.
var createAsyncTask = function() {
var dfd = $.Deferred();
setTimeout(function() {
dfd.resolve('Task done!');
}, 500);
// Return only the promise, not the full Deferred object
return dfd.promise();
};
var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
console.log(msg);
});
// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise objectCompruebe sus conocimientos
¿Cuál de los siguientes métodos usaría para registrar una callback que se ejecute ÚNICAMENTE cuando un objeto Deferred complete correctamente su operación asíncrona?
Repaso: fundamentos de Deferred
¡Excelente trabajo! En esta lección, ha comprendido los conceptos fundamentales de los objetos Deferred de jQuery:
- Gestionan operaciones asíncronas, evitando el infierno de callbacks.
- Se encuentran en los estados pendiente, resuelto o rechazado.
- Utiliza
.resolve()para indicar éxito y.reject()para indicar un fallo. - Las callbacks se asocian mediante
.done()(éxito),.fail()(fallo) y.always()(ambos). .promise()devuelve un objeto de solo lectura para proteger la manipulación del estado.
A continuación, aprenderá a encadenar y componer estos potentes objetos.
Preguntas frecuentes
¿La lección «Comprensión de los objetos Deferred» es gratis?
Sí — el texto completo de «Comprensión de los objetos Deferred» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Comprensión de los objetos Deferred»?
Comprenda los conceptos fundamentales de los objetos Deferred de jQuery, cómo representan operaciones asíncronas y cuáles son sus estados (pending, resolved y rejected). Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Comprensión de los objetos Deferred»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Comprensión de los objetos Deferred
- Encadenamiento y composición de Promises
- Gestión de varias tareas asíncronas