Devolución de llamada: en términos de JavaScript, la devolución de llamada es una función que se pasa como parámetro a otra función. La función se ejecuta tan pronto como el resultado de la función de llamada esté listo. En palabras simples, maneja el requisito asíncrono de JavaScript.
Ejemplo: el mejor ejemplo para demostrar esto es usar una función setTimeout() que acepta una devolución de llamada y retrasa la ejecución del código JavaScript. Tan pronto como finaliza el tiempo establecido para la función, se ejecuta la función de devolución de llamada.
// Defining a callback function
var callback = ()=>{
console.log("Hello! GeeksforGeeks");
}
// Passing the callback function
// as a parameter
setTimeout(callback, 2000);
// The callback gets executed as
// soon as 2 seconds are over.
// This behavior shows the
// execution of a callback.
Producción:
Hello! GeeksforGeeks
Promesas: Es muy similar a las devoluciones de llamada en funcionamiento. Pero, la ventaja de usar Promises es mejorar la legibilidad del código, ya que nos salva del infierno de la devolución de llamada.
Las promesas tienen cuatro estados.
- Pendiente: La promesa aún no se ha completado. No tuvo éxito y fracasó.
- Cumplido: La promesa terminó con éxito.
- Rechazado: La promesa terminó con un error.
- Resuelto: la promesa dio un error o tuvo éxito.
Convertir una devolución de llamada existente en una promesa:
// Existing Callback
var callback = function(err, success) {
if(err) {
console.log("Geek is very sad!");
}
else {
console.log("Geek is optimistic, "
+ "thus becomes successful");
}
}
var caller = function(status, callback){
if(status === 'Happy')
callback(null, true);
else {
callback(new Error(), false);
}
}
// Calling the caller method
// Executes the success part
caller('Happy', callback);
// Executes the error part
caller('Sad', callback);
Producción:
Geek is optimistic, thus becomes successful Geek is very sad!
Pasos a seguir:
- Defina una función llamada error e inserte el bloque de código de error de la función de devolución de llamada en ella.
- Defina una función llamada éxito e inserte el bloque de código de éxito en ella.
- Luego modifique el código de la persona que llama devolviendo el objeto de promesa.
- Utilice los métodos de éxito y error de cualquiera de las siguientes maneras.
- Consulte el fragmento de código a continuación para una mejor comprensión.
// This snippet briefly shows
// the implementation
var error = function(){
// The error codeblock from
// the existing callback.
console.log("Geek is very sad!");
}
var success = function(){
// The success codeblock from
// the existing callback
console.log("Geek is optimistic, "
+ "thus becomes successful");
}
var caller = function(status) {
return new Promise(function(resolve, reject) {
if(status === 'Happy') {
// Calling the resolve function
// when function returns success
resolve();
}
else {
// Calling the reject function
// when function returns failure
reject();
}
});
};
// Throw success
caller('Happy').then(success).catch(error);
// Throw error
caller('Sad').then(success).catch(error);
Producción:
Geek is optimistic, thus becomes successful Geek is very sad!
Cambiemos el siguiente fragmento de código en una implementación de promesa. Para ejecutar la implementación, debemos configurar una aplicación web que se ejecute en un servidor de Node.
Para entender usando un ejemplo, necesitamos configurar un servidor de Node en el sistema. Puede seguir los siguientes pasos para configurar un servidor de Node.
Instale el Node y configure una aplicación de Node simple siguiendo los pasos que se muestran aquí .
Ejemplo: aquí, el escenario es que tenemos una array de estudiantes que tiene id y nombre como valores. Necesitamos obtener el nombre del estudiante que tiene la identificación dada. Recibimos una devolución de llamada existente que debe convertirse en una promesa.
/* The following code snippet depicts a GET request
to the server made by the client, which requests for
the name of the student with a given student id. Here we
have a student array that stores JSON objects of
student id and name. We are going to create a GET
Request using expressjs in node first. Then we will
write a route to get name of student based on id. */
const express = require('express');
const app = express();
// Students array
var students = [
{
id: 101,
name: "Geek A"
},
{
id: 102,
name: "Geek B"
},
{
id: 103,
name: "Geek C"
},
{
id: 104,
name: "Geek D"
}
];
// Definition of the callback function
const callback = (err, student) => {
if(err) {
return `Student with given id ${err} not found`;
}
else {
return "Here is the student: " + student.name;
}
}
// Passing studentid and callback function as parameter
const findName = (studentId, callbackFunction) => {
let student = students.find(function(studentValue) {
return studentValue.id == studentId;
});
// Student not found
if(typeof student === 'undefined') {
return callbackFunction(studentId, false);
}
else { // Student found
return callbackFunction(null, student);
}
}
const getName = (req, res)=>{
// Sending back the response to the server
res.send(findName(req.params.studentId, callback));
}
app.get('/getName/:studentId', getName);
app.listen(8000, 'localhost', function () {
console.log('Server Listening');
});
Producción:
Ahora, podemos convertir la función de devolución de llamada en promesas. Aquí, podemos seguir los pasos anteriores nuevamente, es decir, la lógica de error en la función de falla y la lógica de éxito en la función de éxito. Consulte el siguiente código para obtener más claridad.
const express = require('express');
const app = express();
var students = [
{
id: 101,
name: "Geek A"
},
{
id: 102,
name: "Geek B"
},
{
id: 103,
name: "Geek C"
},
{
id: 104,
name: "Geek D"
}
];
// Writing the success logic here
const success = (student) => {
return "Here is the student: " + student.name;
}
// Writing the failure logic here.
const failure = (fail) => {
return `Student with the given id ${fail} was not found`;
}
const findName = (studentId) => {
return new Promise(function (resolve, reject) {
let student = students.find(function (studentValue) {
return studentValue.id == studentId;
});
if (student) {
resolve(student);
}
else {
reject(id);
}
});
}
const getName = async (req, res) => {
let answer = await findName(
req.params.studentId).then(success).catch(failure);
res.send(answer);
}
app.get('/getName/:studentId', getName);
app.listen(8000, 'localhost', function () {
console.log('Server Listening');
});
Producción: