Callbacks

Funcionamiento básico de los callbacks o retrollamadas en Javascript

Los callbacks son funciones que se pasan como parámetro a otra función y se ejecutan dentro de ésta última. Pueden ser muy útiles para evitar la repetición de código y el manejo de funciones de manera síncrona.

Ejemplo de un callback básico:

function suma(num1,num2)
{
    return num1 + num2;
}
function resta(num1,num2)
{
    return num1 - num2;
}
function multiplicacion(num1,num2)
{
    return num1 * num2;
}
function division(num1,num2)
{
    return num1 / num2;
}

function calculadora(cuenta,num1,num2)
{
    return cuenta(num1,num2);
}

El código de arriba está compuesto por varios métodos que realizan una operación artimética. La función calculadora representa la función principal mientras que los otros cuatro métodos representan los callbacks. Sustituyendo el parámetro cuenta de la función calculadora por alguno de los callbacks realizará la operación correspondiente al callback indicado.

calculadora(suma,3,5);
//8
calculadora(resta,5,3);
//2
calculadora(multiplicacion,3,5)
//15
calculadora(division,15,3)
//5

La función que se realiza en un evento también es un callback.

Ejemplo de callback en un evento clic:

var boton= document.getElementById("boton");
boton.addEventListener("click", function(event)
{
    console.log(" Callback ");
});

SUCESIÓN DE CALLBACKS

Los callbacks permiten ejecutar funciones de forma síncrona. A continuación se muestra un ejemplo de una sucesión de callbacks manejada de forma síncrona.

index.html

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
	<title>Callbacks</title>
	
	</head>
	<body>
		<div id="myContent"></div>
		<button id="btn">Ejecutar</button>
		<script src="callback.js"></script>
	</body>
</html>

callbacks.js

const setText = data => {
	myContent.textContent = data;
}
const getData = callback => {
	setText("Solicitando autorización");
	setTimeout(() => {
		callback(true);	
	},2000);
}
const showData = callback => {
	setText("Esperando a mostrar la información");
	setTimeout(() => {
		callback({name:"Carol"});	
	},2000);
}
btn.addEventListener("click", () =>{
	getData(authorization => {
		if(authorization) {
			showData(user => {
				setText(user.name);
			})
		}
	});
});

PROMESAS

Javascript de forma nativa realiza llamadas de forma asíncrona. Esto puede generar errores a la hora de realizar varios métodos, ya que es posible que el resultado de los métodos se obtenga de forma desordenada, es decir, que el resultado de un método sea devuelto antes que un método llamado anteriormente. Las promesas evitan este tipo de errores y permiten realizar una serie de funciones de forma síncrona, como también cierta dependencia entre ellas. Esta dependencia es realmente útil cuando en una sucesión de métodos uno de ellos necesita el resultado de un método anterior.

El objeto Promise trae una función con dos parámetros ( resolve y reject), estos dos parámetros representan la resolución o el fracaso de dicha promesa. Si la promesa es resuelta satisfactoriamente continuará con el proceso, por el contrario si la promesa no es resuelta se detendrá.

new Promise( function(resolve,reject){
});

Continuando con los ejemplos anteriores de callbacks se puede observar en el código siguiente como se añade la promesa y se sustituyen los callbacks.

promesas.js

const setText = data => {
	myContent.textContent = data;
}
const getData = () => {
	return new Promise((resolve,reject) =>{
		setText("Solicitando autorización");
		setTimeout(() => {
			resolve(true);	
		},2000);
	});
}
const showData = () => {
	return new Promise((resolve,reject) => {
		setText("Esperando a mostrar la información");
		setTimeout(() => {
			resolve({name:"Carol"});	
		},2000);
	});
}
btn.addEventListener("click", () =>{
	getData().then(authorization => {
		if(authorization) {
			showData().then(user => {
				setText(user.name);
			});
		}
	});
});

Tanto el método getData como el método showData ahora devuelven un objeto Promise. Por tanto, al activarse el evento del botón, las llamadas a estos métodos cuando devuelven este objeto Promise trae consigo el método then que permite continuar con el proceso o con otra promesa si ésta es resuelta. Para poder aprovechar al máximo el objeto Promise y plasmar un código mucho más fácil de leer se puede simplificar aprovechando que el método invocado devuelve una promesa y mediante return y then poder subir un nivel y continuar con el proceso. A pesar de la sencillez y de que solo son dos concatenaciones la comparación del código siguiente con el de más arriba muestra un código más limpio y más legible.

btn.addEventListener("click", () =>{
    getData().then(authorization => {
        if(authorization) {
            return showData()
	}
    }).then(user => {
        setText(user.name);
    });
});

ASYNC Y AWAIT

Con Async y Await es posible mejorar todavía más el código en una sucesión de promesas. Permiten prescindir del método then y obtener un código al mismo nivel. Es necesario añadir la palabra reservada async antes de la función y justo antes de cada promesa añadir la palabra reservada await.

btn.addEventListener("click", async () =>{
    let user =null;
    const authorization = await getData();
        if(authorization) {
            user= await showData();  
	}
        setText(user.name);
});

fuente: //ed.team/cursos/ajax-ws

Comentarios: 0