Este documento habla sobre promesas no bloqueantes y cómo funcionan. Explica que una promesa representa el estado de una operación asíncrona como pendiente, cumplida o rechazada. Los métodos then permiten agregar callbacks que se ejecutarán en orden cuando la promesa se cumpla o rechace. Las promesas permiten encadenar operaciones asíncronas de forma no bloqueante y manejar errores de forma más limpia que con callbacks anidados.

1. Hablemos de promesas

2. Non-blocking I/O

3. Non-blocking I/O
(1)
(2)
(1) Ejecuto la función
$ajaxRequest,
registro el cb
(2) Sigo la ejecucion
del stack
(3) Respuesta de la
petición, añado a
la cola el msg
asociado al cb
(3)
$ajaxRequest.get({
url: 'https://www.example-api.com'
}, function () {
console.log.apply(console, arguments);
});

4. Non-blocking I/O $ajaxRequest.get({
url: 'https://www.example-api.com/0'
}, function(err, firstRes){
//... process first response
$ajaxRequest.get({
url: 'https://www.example-api.com/1'
}, function(err, SecondRes){
//... process second response
$ajaxRequest.get({
url: 'https://www.example-api.com/2'
}, function(err, LastRes){
//... process last response
});
});
});

5. Non-blocking I/O
callback hell

6. Promise
A+ ESTANDAR

7. Promise
Promesa = Objeto que representa el estado de una
operación asíncrona

8. Promise
Promesa = Objeto que representa el estado de una
operación asíncrona
new Promise(function(resolve, reject){
resolve(/*...*/);
reject(/*...*/);
});

9. Promise
El estado de una promesa puede ser:
1.pending
2.fulfilled
3.rejected

10. Promise
El estado de una promesa puede ser:
1.pending
2.fulfilled
3.rejected
Los métodos para cambiar de estado:
1.resolve
2.reject

11. Promise
El estado de una promesa puede ser:
1.pending
2.fulfilled
3.rejected
Los métodos para cambiar de estado:
1.resolve
2.reject
Importante!! una vez fulfilled o rejected, el estado pasa a
ser inmutable

12. Promise
HELLO PROMISE

13. Then
Este método recibe dos parámetros:
1.onFulfilled
2.onRejected

14. Then
Este método recibe dos parámetros:
1.onFulfilled
2.onRejected promise.then(function(result){
/*... action onFullfilled*/
}, function(reason){
/*... catch error onRejected*/
});

15. Then
PROMISE AND THEN

16. Always asynchronous
Importante entender que then siempre es asíncrono
var promise = new Promise(function(resolve, reject){
resolve("FIRST");
});
promise.then(function(result){
console.log(result);
});
console.log("SECOND");

17. Always asynchronous
THEN IS ASYNCHRONOUS

18. Concat then
La concatenación de las llamadas a
then añade cada uno de los callback a
una cola que se va llamando en orden
secuencial

19. Concat then
La concatenación de las llamadas a
then añade cada uno de los callback a
una cola que se va llamando en orden
secuencial
function firstThen(response){
//... first fulfillment handler in queue
}
function secondThen(valueFirst){
//... second fulfillment handler in queue
}

20. Concat then
La concatenación de las llamadas a
then añade cada uno de los callback a
una cola que se va llamando en orden
secuencial
new Promise(function(resolve, reject){
resolve("FIRST");
}).then(firstThen)
.then(secondThen);
function firstThen(response){
//... first fulfillment handler in queue
}
function secondThen(valueFirst){
//... second fulfillment handler in queue
}

21. Concat then
El callback onFulfilled puede devolver:
1.Un valor
promise.then(function(result1){
return 5;
}).then(function(result2){
//...result2 = 5
});

22. Concat then
El callback onFulfilled puede devolver:
1. Un valor
2.Una promesa
promise.then(function(result1){
return 5;
}).then(function(result2){
//...result2 = 5
});
promise.then(function(result1){
return new Promise(function(resolve, reject){
resolve(10);
});
}).then(function(result2){
//...result2 = 10
});

23. Concat then
PAY A VALUE y PAY A PROMISE

24. Catch errors
El callback onRejected se ejecuta en caso de producirse una excepción o
cuando la promesa pasa a rejected.

25. Catch errors
El callback onRejected se ejecuta en caso de producirse una excepción o
cuando la promesa pasa a rejected.
new Promise(function(resolve, reject){
resolve("FIRST");
}).then(function(result){
throw new Error("NO CATCH");
}).then(null, function(err){
console.log(err);//...err = NO CATCH
});
new Promise(function(resolve, reject){
reject("FIRST");
}).then(null, function(err){
console.error(err);//...err = NO CATCH
})

26. Catch errors
Cuidado !!
function errorHandler(reason){
// ...
}
function successHandler(value){
// ...
throw new Error("NO CATCH");
}
new Promise(function(resolve, reject){
// resolve o reject promise
}).then(successHandler, errorHandler);

27. Catch errors
Cuidado !!
function errorHandler(reason){
// ...
}
function successHandler(value){
// ...
throw new Error("NO CATCH");
}
new Promise(function(resolve, reject){
// resolve o reject promise
}).then(successHandler, errorHandler);
Nadie captura new Error("NO CATCH");

28. Catch errors
Siempre capturamos al final!!
new Promise(function(resolve, reject){
// resolve o reject promise
}).then(function(response){
//... process first response
return new Promise(function(resolve, reject){/* resolve */});
}).then(function(response){
//... process second response
}).then(null, function(err){
console.error(err);
});

29. Catch errors
CATCH ERRORS

31. Mas info.
Estándar A+
Página de información general sobre promesas
Articulo para entender como funcionan las promesas por dentro
Librería rsvp
Diseño de la librería q
NodeSchool Workshopper - Promise It Won't Hurt (más que
recomendable)