Callbacks y Promises | Explicado con ejemplos

En el mundo de la programación, Callbacks y Promises son herramientas útiles para aquellos que desean trabajar con funciones asíncronas en JavaScript. Las funciones asíncronas se ejecutan en segundo plano mientras que otras operaciones continúan en primer plano. Esto puede ser útil en situaciones en las que se necesita esperar una respuesta de una API o de una base de datos.

En este artículo, explicaremos lo que son los Callbacks y las Promises en JavaScript, cómo se usan y proporcionaremos algunos ejemplos para ayudarte a comprenderlos mejor.

Callbacks

Un callback es una función que se pasa como argumento a otra función y se invoca cuando la función principal se ha completado. Los callbacks son un ejemplo útil de programación asíncrona en JavaScript, ya que permiten que otras operaciones continúen mientras se espera una respuesta.

En lugar de esperar a que se complete una operación para seguir adelante con el código, es posible establecer una función de callback que espere a que se complete la operación y luego continúe con el resto del código.

En JavaScript, por ejemplo, se puede utilizar un callback para recopilar los datos de una API.

Un ejemplo de cómo se utiliza un callback en JavaScript:


function fetchData(callback) {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => callback(data))
}

fetchData((data) => {
console.log(data)
})


En este ejemplo, la función fetchData utiliza una función de callback para recopilar los datos de una API. La función callback se define como una función anónima que se invoca una vez que se ha recibido la respuesta de la API.

Promises

Las Promises son una forma más moderna de manejar las operaciones asíncronas en JavaScript. A diferencia de los callbacks, las Promises pueden tener varios estados, que incluyen 'pendiente', 'resuelto' y 'rechazado'.

Las Promises se utilizan para manejar operaciones asíncronas en JavaScript. Se puede utilizar una Promise para realizar una operación y esperar a que se complete antes de continuar con el resto del código.

Un ejemplo de cómo se utiliza una Promise en JavaScript:


function fetchData() {
return new Promise((resolve, reject) => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error))
})
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))


En este ejemplo, la función fetchData devuelve una Promise que envuelve la operación de obtener datos de la API. La Promise se resuelve una vez que se han recibido los datos y se devuelve a la función que la ha llamado.

Ejemplos de uso

Ahora que hemos cubierto los aspectos básicos de los callbacks y las Promises, podemos proporcionar algunos ejemplos de su uso en JavaScript.

Callback en una función de tiempo de espera


function waitForTwoSeconds(callback) {
setTimeout(() => {
callback()
}, 2000)
}

waitForTwoSeconds(() => {
console.log('Han pasado dos segundos')
})


En este ejemplo, la función waitForTwoSeconds toma un callback como argumento y lo invoca después de esperar dos segundos.

Promise en una función de tiempo de espera


function waitForTwoSeconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Han pasado dos segundos')
}, 2000)
})
}

waitForTwoSeconds()
.then(data => console.log(data))


En este ejemplo, la función waitForTwoSeconds devuelve una Promise que se resuelve después de esperar dos segundos.

Conclusión

Los callbacks y las Promises son herramientas útiles para manejar operaciones asíncronas en JavaScript. Los callbacks son una forma más antigua de manejar las operaciones asíncronas, mientras que las Promises proporcionan una forma más moderna de manejarlas.

Es importante recordar que las Promises tienen tres estados: 'pendiente', 'resuelto' y 'rechazado', lo que les permite manejar operaciones asíncronas de manera más completa y efectiva.

Esperamos que este artículo te haya ayudado a comprender mejor los conceptos de Callbacks y Promises. No dudes en probar los ejemplos proporcionados y jugar con ellos para mejorar tu comprensión.

Preguntas frecuentes

¿Cuál es la diferencia entre un Callback y una Promise?

Un Callback es una función que se pasa como argumento a otra función y se invoca cuando la función principal se ha completado. Las Promise son una forma más moderna de manejar las operaciones asíncronas en JavaScript que permiten tener varios estados y manejar las operaciones de manera más completa y efectiva.

¿Cómo se utilizan los Callbacks y las Promises en JavaScript?

Los Callbacks y las Promises se utilizan para manejar operaciones asíncronas en JavaScript. Los Callbacks pueden ser pasados como argumentos a otras funciones para esperar que se complete una operación, mientras que las Promises pueden ser utilizadas para realizar una operación y esperar a que se complete antes de continuar con el resto del código.

¿Qué son las Promises?

Las Promises son una forma más moderna de manejar operaciones asíncronas en JavaScript. A diferencia de los callbacks, las Promises pueden tener varios estados, que incluyen 'pendiente', 'resuelto' y 'rechazado'. Las Promises se utilizan para manejar operaciones asíncronas de manera más completa y efectiva.

Cómo eliminar un elemento de un arreglo por su valor en JavaScript

¿Qué es el evento Window onload en JavaScript?

Parsear una cadena de HTML con JS - JavaScript

Javascript Array Shift y Unshift Método

Cómo imprimir en la Consola en JavaScript

Cómo redondear un número a 2 decimales en JavaScript

Diferentes formas de convertir un objeto a una cadena de texto en JavaScript

Cómo formatear una fecha como YYYY-MM-DD en JavaScript

Cómo convertir un timestamp a formato de fecha en JavaScript