Devoluciones de llamada y promesas | Explicado con ejemplos
En esta publicación, veremos cuáles son las devoluciones de llamada y las promesas en JavaScript explicadas con la ayuda de ejemplos.
¿Qué son las devoluciones de llamada??
Las devoluciones de llamada son funciones que se pasan dentro de los argumentos de otras funciones, este procedimiento es válido en JavaScript porque las funciones son objetos y los objetos pueden aprobarse como argumentos a las funciones. La estructura básica de la función de devolución de llamada se parece a esto.
FUNCIÓN DEMOFUNCTION (Callback)llamar de vuelta();
Secuencia de ejecución y necesidad de devoluciones de llamada
Las funciones de devolución de llamada se utilizan para adquirir el control sobre la secuencia de ejecución. En general, las funciones se ejecutan sobre la base de la secuencia de que se invocan, no en la secuencia en la que se definen. Por ejemplo:
function Job1 ()consola.log ("Soy la tarea 1");
function Job3 ()
consola.log ("Soy la tarea 3");
function Job2 ()
consola.log ("Soy la tarea 2");
Job1 ();
Job2 ();
Job3 ();
Obtendrá la siguiente salida:
Pero, ¿qué pasa si queremos invocar la Tarea 2 solo cuando la Tarea 1 termina su procesamiento?. Para eso, necesitamos funciones de devolución de llamada y una comprensión básica de la ejecución asincrónica.
Un ejemplo de devolución de llamada en acción
Considere el siguiente código:
VAR miembros = ["John Doe", "Sam Smith", "Allie Cartel"];función addnewmember (Newuser)
miembros.Push (Newuser);
función getAllMembers ()
consola.registro (miembros);
AddNewMember ("alfa");
getAllMembers ();
Estamos trabajando con una matriz que contiene la lista de miembros de un club social, y tenemos dos funciones. Una función que imprime la lista de todos los miembros y la otra se usa para agregar un miembro a la lista.
Cambiemos este código para que imite el comportamiento de bases de datos reales y retrasos en las redes como retraso y pings.
VAR miembros = ["John Doe", "Sam Smith", "Allie Cartel"];función addnewmember (Newuser)
setTimeOut (function ()
miembros.Push (Newuser);
consola.log ("Miembro agregado");
, 200);
función getAllMembers ()
setTimeOut (function ()
consola.log ("Los miembros son:");
consola.registro (miembros);
, 100);
AddNewMember ("alfa");
getAllMembers ();
Como puede ver, este código está usando el setTimeout () función para imitar retrasos de bases de datos. El adduser toma aproximadamente 2 segundos y GetAllMembers () la función toma 1 segundo.
Queremos agregar un nuevo usuario "alfa" e imprimir la lista después de agregar el miembro, no antes y es por eso que usamos la secuencia:
AddNewMember ("alfa");getAllMembers ();
Ejecute el código y obtendrá la siguiente salida:
La lista se imprimió primero y luego se agregó el miembro. Esto se debe a que el programa no esperó el añadir miembro() función para terminar de procesar. Ahora, si usamos funciones de devolución de llamada para ejecutar el GetAllMembers () función solo después del AddnewMember () está terminado, nuestro código se convierte en:
VAR miembros = ["John Doe", "Sam Smith", "Allie Cartel"];function addNewMember (NewUser, Callback)
setTimeOut (function ()
miembros.Push (Newuser);
consola.log ("Miembro agregado");
llamar de vuelta();
, 200);
función getAllMembers ()
setTimeOut (function ()
consola.log ("Los miembros son:");
consola.registro (miembros);
, 100);
AddnewMember ("Alpha", GetAllMembers);
Si mira el código, lo verá dentro del AddnewMember () Función Estamos tomando un argumento de devolución de llamada, esto asegurará que la función de devolución de llamada se ejecute en nuestra secuencia deseada.
La salida del fragmento de código anterior es como:
El nuevo miembro se agregó primero y luego toda la lista se imprimió en la consola. Así es como puede usar devoluciones de llamada para obtener el control de la secuencia de ejecución.
¿Qué son las promesas??
Una promesa es un objeto y es algo que se hace/se completa en el futuro. En JavaScript, es exactamente lo mismo que en la vida real. El sintaxis de una promesa en JavaScript se da a continuación:
var mypromise = new promise (function (resolve, rechazar)// algún código
);
Como se puede ver en la sintaxis de la promesa, el constructor de promesas solo acepta la función de devolución de llamada como argumento. Los parámetros de resolución y rechazo se utilizan en la función de devolución de llamada, y se llama la resolución cuando las actividades realizadas dentro de la función de devolución de llamada tienen éxito. Sin embargo, si el procedimiento no tiene éxito, se llama rechazo.
Por ejemplo, supongamos que tu madre te promete que te pongas en bicicleta en tu cumpleaños. Esa promesa es su garantía de que le comprará una bicicleta en su cumpleaños, sin embargo, cuando llegue el momento, puede cambiar de opinión. Para que ella pueda comprarte una bicicleta o no. Esta es una promesa en el lenguaje simple de laicos. Mirando este ejemplo, podemos identificar tres estados/ posibilidades de una promesa en JavaScript:
- Cumplido: se compra la bicicleta. Valor de resultado
- Pendiente: tu cumpleaños no ha llegado y no estás seguro de si tu madre te comprará una bicicleta o no. Indefinido
- Rechazado: las bicicletas no se compran en su cumpleaños. Error.
Para comprender mejor las promesas, permítanos pasar por un ejemplo:
Tomaremos este ejemplo paso a paso I-e primero crearemos un objeto de promesa utilizando el constructor de promesa como se ve en la sintaxis de la promesa anterior. A continuación, usaremos ese objeto de promesa.
En el siguiente código crear un objeto de promesa:
// Creando objeto prometedorvar mypromise = new promise (function (resolve, rechazar)
const número1 = 2;
const número2 = 2;
// Comparando dos números
if (número1 === Número2)
// Operación exitosa
resolver();
demás
// Se produjo un error
rechazar();
);
En el código anterior, primero, creamos un objeto de promesa mi promesa, y luego pasó una función de devolución de llamada dentro del constructor de promesas. En la función, estamos verificando si dos números son iguales o no. Si los números son iguales, la llamada se resolverá, de lo contrario, si se produce un error, la llamada será rechazada.
Para usar el objeto de promesa (mi promesa) necesitaremos "Promesa de los consumidores”(Consumir promesas registrando funciones) conocidas como entonces() método para el cumplimiento y atrapar() Método para el rechazo. El siguiente código ilustra esto:
mi promesa.entonces (function ()
consola.registro ("Los números iguales. Éxito");
).
Catch (function ()
consola.log ('error');
);
Si los números que se están marcando son iguales, entonces el .entonces() se invocará el método y veremos "Los números iguales. Éxito". Sin embargo, si los números no son iguales, entonces el .atrapar() se invocará el método y veremos el Error Mensaje en la ventana de la consola.
Todo el código se da a continuación:
// Creando objeto prometedorvar mypromise = new promise (function (resolve, rechazar)
const número1 = 2;
const número2 = 2;
// Comparando dos números
if (número1 === Número2)
// Operación exitosa
resolver();
demás
// Se produjo un error
rechazar();
);
// Usar objeto de promesa
mi promesa.
entonces (function ()
consola.registro ("Los números iguales. Éxito");
).
Catch (function ()
consola.log ('error');
);
Desde la salida, podemos ver que los números son iguales.
Conclusión
Para implementar el código asíncrono en JavaScript, utilizamos funciones y promesas de devolución de llamada. Se pasa una función de devolución de llamada como argumento a otra función, mientras que la promesa es algo que se logra o se completa en el futuro. En JavaScript, una promesa es un objeto y usamos el constructor de promesas para inicializar una promesa. Para usar objetos de promesa, recibimos ayuda de los consumidores prometedores que son entonces() método (si se cumple la promesa) y atrapar() Método (si la promesa es rechazada).