Unidad 5.2.

Comunicación asíncrona. Callbacks y Promesas

 Tipos de comunicación
 Callbacks
 Promesas
 Unidad 5.2.
Comunicación asíncrona.
Tipos de comunicación
• Bloqueante: Una llamada u operación bloqueante no devuelve el control a nuestra aplicación hasta que se ha
completado. Por tanto el thread (hilo) queda bloqueado en estado de espera
• No Bloqueante: Una llamada no bloqueante devuelve inmediatamente con independencia del resultado. En caso de que
se haya completado, devolverá los datos solicitados. En caso contrario (si la operación no ha podido ser satisfecha) podría
devolver un código de error indicando. En este caso se controlará el resultado de la respuesta

BLOQUEANTE NO BLOQUEANTE
El control NO es devuelto a la La llamada es devuelta con independencia
aplicación hasta que la llamada de su resultado. Se debe sondear la
bloqueante termine respuesta para completar el trabajo
 Unidad 5.2.
Comunicación asíncrona.
Tipos de comunicación
• Síncrono. 'bloqueante' Toda operación de entrada/salida se ejecuta de forma secuencial y, por tanto, debemos
esperar a que se complete para procesar el resultado
• Asíncrono. ‘no bloqueante’ La finalización de la operación E/S se señaliza más tarde, mediante un mecanismo
específico como por ejemplo un callback, una promesa o un evento, lo que hace posible que la respuesta sea
procesada en diferido

SÍNCRONO ASÍNCRONO
Ejecución secuencial. Retorna cuando La finalización de la operación es notificada
la operación ha sido completada en al programa principal. El procesado de la
su totalidad respuesta se hará en un futuro
 Unidad 5.2.
Comunicación asíncrona.
Tipos de comunicación

Según la clasificación Síncrono/Asíncrono – Bloqueante/No Bloqueante , podemos tener los siguientes tipos
de operaciones E/S :

• Síncronas y Bloqueantes. Toda la operación se hace de una vez, bloqueando el flujo de ejecución:
- El thread (hilo de ejecución) es bloqueado mientras espera
- La respuesta se procesa inmediatamente después de terminar la operación
• Síncronas y No-Bloqueantes. Similar a la anterior pero usando alguna técnica de polling (sondeo) para
evitar el bloqueo en la primera fase:
- La llamada devuelve inmediatamente, el thread no se bloquea. Se necesitarán sucesivos intentos
hasta completar la operación
- La respuesta se procesa inmediatamente después de terminar la operación
• Asíncronas y No-Bloqueantes:
- La petición devuelve inmediatamente para evitar el bloqueo
- Se envía una notificación una vez que la operación se ha completado. Es entonces cuando la función
que procesará la respuesta (callback) se encola para ser ejecutada en algún momento en nuestra
aplicación
 Unidad 5.2.
Comunicación asíncrona.
Callbacks
Un callback es una función que se pasa como argumento de otra función, y que será invocada para completar algún
tipo de acción. Esto es posible porque en Javascript las funciones son objetos.
function imprimir(callback) {
callback();
}

JavaScript ejecuta el código secuencialmente en orden descendente. Tarea1();

Tarea2();
Tarea3();

Sin embargo, hay algunos casos en los que el código se ejecuta (o debe ejecutarse) después de que ocurra otra cosa y
también de forma no secuencial, lo que es la programación asíncrona.
Los callbacks aseguran que una función no se va a ejecutar antes de que se complete una tarea, sino que se ejecutará
justo después de que la tarea se haya completado. Nos ayuda a desarrollar código JavaScript asíncrono.
setTimeout es una función asíncrona que programa la
setTimeout(Tarea1,3000); ejecución de un callback
Tarea2();
En este caso se ejecutará Tarea2, Tarea3 y después Tarea1 Callback1
Tarea3();
 Unidad 5.2.
Comunicación asíncrona.
Callbacks
En JavaScript, los callbacks son funciones que se pasan como argumentos a otras funciones y se ejecutan después de que
se complete una operación asíncrona o algún otro tipo de evento. Los callbacks son una forma común de manejar
operaciones asíncronas, como solicitudes AJAX, lectura de archivos o eventos de usuario.
Los callback se utilizan generalmente para el manejo de código asíncrono
// Función que toma un callback como argumento
function operacionAsincrona(callback) {
// Simulación de una operación asíncrona
setTimeout(function() {
console.log("La operación asíncrona ha terminado.");
// Llamada al callback después de completar la operación
callback(); setTimeout es una función
}, 1000); } asíncrona que programa la ejecución
// Definición del callback
de un callback
function miCallback() {
console.log("El callback ha sido invocado.");
}
// Llamada a la función con el callback
operacionAsincrona(miCallback);

PROBLEMA: Los callback anidados pueden ser muy difíciles de leer y de usar
 Unidad 5.2.
Comunicación asíncrona.
Promesas

Composición de Promesas
• Una promesa es un objeto que representa el resultado de una operación asíncrona
• Este resultado podría estar disponible ahora, en el futuro o nunca
• Las promesas se basan en callbacks pero permiten un mejor manejo y sintaxis
• Las promesas son especiales en términos de asincronía ya que añaden un nuevo nivel de prioridad
Cuando llamamos a una función asíncrona implementada con este patrón, nos devolverá inmediatamente
una promesa como garantía de que la operación asíncrona finalizará en algún momento, ya sea con éxito o
con fallo

Una vez que tengamos el objeto promesa en nuestro poder, registramos un par de callbacks:
• uno para indicarle a la promesa qué debe hacer en caso de que todo vaya bien  resolve
• otro para determinar qué hacer en caso de fallo  reject
 Unidad 5.2.
Comunicación asíncrona.
Promesas
Promise es el constructor de la promesa, recibe una función como parámetro y esta función recibe dos parámetros
resolve()  La promesa se ha resuelto
reject()  Ha ocurrido un error

let promesa = new Promise((resolve, reject) => {

var exito=true;
if(exito) {
resolve ('Operación resuelta'); //Marca la operación como resuelta y devuelve ‘Operación
resuelta’
} else{
reject ('Ha ocurrido un error');
}
});

El argumento que se le pasa a la promesa se llama función ejecutora. Cualquier error que se produzca en el bloque se
resuelve en la promesa lanzando el método reject(). No es necesario manipular el estado reject de una
Promesa, por defecto la promesa fallará silenciosamente y no afectará a la ejecución del resto de la aplicación
 Unidad 5.2.
Comunicación asíncrona.
Promesas
La promesa, cuando es invocada recibe:
then()  Recibe como primer argumento la
//Ahora llamamos a la promesa y usamos los valores que
nos devuelve: función que manipula el estado response, que
recoge lo que nos está devolviendo el resolve de la
promesa promesa
.then((response) => {
console.log(`Response: ${response}`);
catch()  Recibe una función con un parámetro
})
.catch((error) => { que recoge loa que nos está devolviendo el reject de
console.log(`Error: ${error}`); la promesa
});

Promesas
 Unidad 5.2.
Comunicación asíncrona.
Promesas
Una promesa tiene 3 posibles estados:
• Pendiente. Cuando la invocamos queda en estado pendiente, y se inicia la asincronía
• Resuelta. Cuando se obtiene un resultado, se invoca con éste a resolve()
• Rechazada. Si se produce un error invoca a reject()

finally  Cuando la promesa se resuelve, sea exitosa o rechazada, será ejecutada la función de callback especificada
Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa
Esto ayuda a evitar tener código duplicado tanto en el then() como en el catch()

let promesa1 = new Promise((resolve,reject) => { promesa1

console.log('Promesa pendiente ...'); .then((resolve) => {
setTimeout(() => { console.log(`resolve ${resolve}`);
resolve('Promesa realizada correctamente'); })
}, 1000); .catch((error) => {
setTimeout(() => { console.log(`reject ${error}`);
reject('Ocurrió un error. La Promesa ha fallado'); })
}, 2000); .finally (() => {
}); //opción al terminar la promesa sin
tener en cuenta el resultado;
})
 Unidad 5.2.
Comunicación asíncrona.
Promesas

Realizar el siguiente ejercicio

Utilizando promises, realizar un ejemplo en javascript que obtenga aleatoriamente un
número entre 0 y 1. Deberá cumplir los siguientes requisitos:
• En el caso que el número< 0.4 se obtendrá el mensaje “Correcto, número < 0.4.
El número es: xx”
• En caso contrario obtendrá el mensaje “Error, número demasiado grande. xx”
• En cualquier caso se informará del final del ejercicio
 Unidad 5.2.
Comunicación asíncrona.
Promesas

Control de error con el segundo del then

Además, los errores, en lugar del catch, se pueden manejar con el segundo parámetro
del then:
Primerapromesa
.then(response=>console.log(response),error=>console.log(error));

O lo que es lo mismo: Primerapromesa

.then(
response=>{
console.log(response);
},
error=>{
console.log(error);
}
Promesas 7
);
 Unidad 5.2.
Comunicación asíncrona.
Promesas
Promesas encadenadas (cadenas de then)
Para encadenar Promesas debemos devolver la Promesa siguiente en el resultado de la Promesa actual
Dependiendo del resultado -then- de la Promesa anterior será ejecutada la Promesa siguiente -then siguiente-
PrimeraPromesa
Como resultado de .then(
PrimeraPromesa response => { Encadenar errores
pasamos la console.log('PrimeraPromesa con exito'); throw  Lanza una excepción
return SegundaPromesa;
SegundaPromesa. La }, definida por el usuario
llamada a la segunda error => {
promesa va a ser recibida console.log('Error 1');
throw error;
en el siguiente then En caso de fallo en la
}
) PrimeraPromesa lanzamos una
ValorSegundaPromesa  .then( excepción throw para que los
Valor recibido de la ValorSegundaPromesa => { siguientes then también fallen
llamada a la segunda console.log(ValorSegundaPromesa);
}, (entra en error de la siguientes
promesa, como resultado
error => { promesas)
de la PrimeraPromesa console.log('Error 2');
}
);
 Unidad 5.2.
Comunicación asíncrona.
Promesas
Promesas encadenadas (encadenar errores)
Lo mismo ocurre con el control de errores, ejecuta el error de la Promesa siguiente. Podemos ejecutar un control
de errores común a todas las Promesas encadenadas
Utilizaremos un catch que controlará todos PrimeraPromesa
.then(
los errores. Si se produce un error en response => {
alguna promesa, salta al catch y no ejecuta console.log(`${response} exitosa`);
return SegundaPromesa;
el resto de promesas. }
)
Determina la Promesa que ha sufrido el error .then(
ValorSegundaPromesa => {
console.log(`${ValorSegundaPromesa}exitosa`);
return TerceraPromesa;
}
)
.then(
ValorTerceraPromesa => {
console.log(`${ValorTerceraPromesa} exitosa`);
}
)
.catch(
un catch que recoge todos los errores error => {
console.log(`Error ${error}`);
}
)