Promesas en ES6

La naturaleza asincrona de las aplicaciones Web ocasiona que tengamos que solicitar datos y continuar con nuestra ejecución reaccionando al momento que obtenemos esa data, es por esto que contamos con las Promesas una forma moderna de manejar los llamados asincronos de una manera simple y elegante.

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);

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 :)