La naturaleza
asincrona
de las aplicaciones Web ocasiona que tengamos que solicitar datos y continuar con nuestra ejecución reaccionando al momento que obtenemos esadata
, es por esto que contamos con lasPromesas
una forma moderna de manejar los llamadosasincronos
de una manerasimple
yelegante
.
Las Promesas
la podemos definir como una forma de manejar flujos asincronos
de una manera simple
y elegante
, ademas, de obtener otras garantias como:
-
Callbacks nunca seran llamados antes de la ejecución completa de el actual
event loop
en Javascript. -
Callback agregados con
.then()
serán llamados aun despues de el exito o falla de una operación asincrona. -
Multiples Callback pueden ser agregados con
.then()
varias veces. Cada Callback es ejecutado uno despues del otro.
Miremos primero como se hace tradicionalmente el anidamiento de varios llamados asincronos.
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Obtenemos el resultado: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);
Ahora miremos como se hace con una Promesa
.
doSomething()
.then(function(result) {
return doSomethingElse(result);
})
.then(function(newResult) {
return doThirdThing(newResult);
})
.then(function(finalResult) {
console.log('Obtenemos el resultado: ' + finalResult);
})
.catch(failureCallback);
¿ Te gusta este articulo ? No te pierdas ninguna actualización uniendote al newsletter.
Lo Primero que puedes observar es que es mas facíl de leer y adicionalmente puedes capturar facilmente los errores
que puedan ocurrir. Es mas podemos volverlo aún mas facil de leer, haciendo algo como:
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
console.log('Obtenemos el resultado: ' + finalResult);
})
.catch(failureCallback);
Ahora realicemos un caso de uso común con fetch
fetch('https://randomuser.me/api/?results=5000')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
})
.catch(error => console.error('Error:', error));
y deberias ver info del Api en tu consola.
Si este contenido te parece útil y me quieres ayudar a hacer mas, considera apoyarme en Patreon.
Bueno eso es todo por ahora. Espero sea de utilidad :)