Trabajando con callback, promise, async y await

En este artículo vamos a investigar los conceptos callback, promise, async y await para tener una idea clara de cómo funcionan e interpretar más fácilmente cuando es conveniente usarlos.

Llamando de vuelta con callback

Los callback son funciones que pasamos como parámetro a otra función para que esta lo ejecute, normalmente se usan para continuar la ejecución después de una operación asíncrona, por ejemplo una request, pero no siempre tiene que ser así.

function miCallback() {
    console.log("Hola")
}
setTimeout(miCallback, 1000)

En este sencillo ejemplo vemos que definimos una función llamada «miCallback» y la pasamos a la función setTimeOut para que está la ponga en marcha después de 1000 milisegundos. Si necesita una explicación más en profundidad te recomiendo este video que dedica una parte de los callbacks.

Con los callbacks nos puede interesar el concepto promise

Promise o promesa son valores que aun no tenemos en el presente pero tomarán un valor en algún momento. Cuenta con 2 funciones «resolve» y «reject». Un uso bastante común en el que las empleo es con fetch, la interfaz que empleo para peticiones http.

import fetch from 'node-fetch';

const url = 'https://apimocha.com/luis/example'
// url con error 'https://apimocha.com/luis/example-error'

fetch(url)
    .then(r => r.json())
    .catch(err => console.error("Error: ", err))
    .then(r => console.log(r))

En este sencillo ejemplo vemos cómo podemos lanzar una consulta a servidor remoto y crear un callback para el caso «resolve» con .then(… y en .catch(… tenemos el «reject». Si quieres conocer mejor el funcionamiento, puedes consultar este video de YouTube donde explican de maravilla las promesas.

En lugar de callbacks y promesas podemos usar Async y Await

Tomando como referencia el ejemplo anterior, en que usábamos las promesas para trabajar con callbacks la respuesta de nuestra petición os voy a presentar como sería usando async y await para que nuestro código espere a que las funciones anteriores respondan.

import fetch from 'node-fetch';

const url = 'https://apimocha.com/luis/example'
// url con error 'https://apimocha.com/luis/example-error'

const getFromAPI = async () => {
    const r = await fetch(url)
    if(r.status !== 200)
        return r.status + ": " + r.statusText
    const res = await r.json()
     return res
}
console.log(await getFromAPI())

Creamos la función asíncrona «getFromAPI» y para imprimir el resultado esperamos a que responda con await (de lo contrario nos devolverá una promesa). Del mismo modo dentro de nuestra función lo hacemos con fetch y para pasar nuestro resultado a json.

Como en el resto de apartado te recomiendo este video de Youtube donde creo que explican bastante bien los conceptos de async y await.

Fuente principal de mi información

De donde también resumí un poco que es Event Loop, una información bastante útil para entender cómo se comporta nuestro código en el navegador.