These slides have been presented in a lecture about promises at the SphereIT conference on Octobere 19th 2019. Author: Mateusz Bryła (https://www.linkedin.com/in/mateusz-bryła-78aa1572/) Dreamer, programmer, consultant, trainer. Founder at Lingmates, Team Lead at Codete.

1. A Promise is a Promise
Mateusz Bryła

2. Mateusz Bryła
Tech Lead at Cloudinary

3. Agenda
● Promises 101
● Promises caveats
● Recap
● Alternatives
● Q & A
Win a free ticket! =D

4. What are we talking about?
Promise Objects
Introduced: ECMAScript 2015 (previously ES6) - June 2015
https://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects
Support: https://caniuse.com/#feat=promises

5. What are we talking about?
Promise Objects
Introduced: ECMAScript 2015 (previously ES6) - June 2015
https://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects
Support: https://caniuse.com/#feat=promises
Polyfills:
• https://github.com/stefanpenner/es6-promise
• http://bluebirdjs.com/docs/install.html
• https://polyfill.io

6. What are we talking about?
Async / await
Introduced: ECMAScript 2017 - June 2017
https://www.ecma-international.org/ecma-262/8.0/#sec-async-function-definitions
Support: https://caniuse.com/#feat=async-functions

7. A Promise
“An object that is used as a placeholder for the eventual results of a deferred (and
possibly asynchronous) computation”ECMAScript specification
Three mutually exclusive states: fulfilled, rejected and pending.
• fulfilled if p.then(f,r) enqueues a job to call f
• rejected if p.then(f,r) enqueues a job to call r
• pending is neither fulfilled nor rejected
• settled if not pending
• resolved if settled or locked in to match state of a different promise

8. function executeDelayed(operation, callback) {
setTimeout(() => {
try {
const result = operation();
callback(null, result);
} catch (error) {
callback(error);
}
}, 1000);
}

9. function executeDelayed(operation, callback) {
setTimeout(() => {
try {
const result = operation();
callback(null, result);
} catch (error) {
callback(error);
}
}, 1000);
}
executeDelayed(() => {
return 42;
}, (error, result) => {
if (error) {
console.log('delayed error', error);
} else {
console.error('delayed result', result);
}
});

10. const promise = new Promise((resolve, reject) => {
// perform action, call resolve / reject upon completion / error
});
promise.then((result) => {
// listen for completion
});
promise.then(
(result) => {}, // listen for completion
(error) => {} // listen for error
);
promise.catch((error) => {
// listen for error
});
promise.finally(() => {
// cleanup
});

11. function executeDelayed(operation, callback) {
setTimeout(() => {
try {
const result = operation();
callback(null, result);
} catch (error) {
callback(error);
}
}, 1000);
}
function executeDelayed(operation) {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
const result = operation();
resolve(result);
} catch (error) {
reject(error);
}
}, 1000);
});
}

12. function executeDelayed(operation, callback) {
setTimeout(() => {
try {
const result = operation();
callback(null, result);
} catch (error) {
callback(error);
}
}, 1000);
}
executeDelayed(() => {
return 42;
}, (error, result) => {
if (error) {
console.log('delayed error', error);
} else {
console.error('delayed result', result);
}
});
function executeDelayed(operation) {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
const result = operation();
resolve(result);
} catch (error) {
reject(error);
}
}, 1000);
});
}
executeDelayed(() => {
return 42;
}).then((result) => {
console.log('delayed result, result);
}).catch((error) => {
console.error('delayed error', error);
});

13. Kahoot #1
kahoot.com

14. p = new Promise((resolve, reject) => {
resolve(10);
resolve(20);
}).then(x => console.log(x));

15. p = new Promise((resolve, reject) => {
resolve(10);
resolve(20);
}).then(x => console.log(x));
// 10

16. p = new Promise((resolve, reject) => {
reject(10);
reject(20);
}).catch(x => console.log(x));

17. p = new Promise((resolve, reject) => {
reject(10);
reject(20);
}).catch(x => console.log(x));
// 10

18. p = new Promise((resolve, reject) => {
resolve(10);
reject(20);
}).then(x => console.log(x))
.catch(x => console.log(x));

19. p = new Promise((resolve, reject) => {
resolve(10);
reject(20);
}).then(x => console.log(x))
.catch(x => console.log(x));
// 10

20. p = new Promise((resolve, reject) => {
reject(10);
resolve(20);
}).then(x => console.log(x))
.catch(x => console.log(x));

21. p = new Promise((resolve, reject) => {
reject(10);
resolve(20);
}).then(x => console.log(x))
.catch(x => console.log(x));
// 10

22. Promise.resolve(10);
new Promise((resolve) => { resolve(10); });
Promise.reject(10);
new Promise((resolve, reject) => { reject(10); });
// fulfills if all fulfilled, rejected otherwise
Promise.all([Promise.resolve(10), Promise.reject(10)]);
// resolves as first resolves
Promise.race([Promise.resolve(10), Promise.reject(10)]);

23. Kahoot #2
kahoot.com

24. Promise.resolve(10)
.then(x => console.log(x))
.then(x => console.log(x))
.then(x => console.log(x));
// 10 undefined undefined

25. p = Promise.resolve(10);
p.then(x => console.log(x));
p.then(x => console.log(x));
p.then(x => console.log(x));

26. p = Promise.resolve(10);
p.then(x => console.log(x));
p.then(x => console.log(x));
p.then(x => console.log(x));
// 10 10 10

27. Promise.resolve(10)
.then(x => { console.log(x); return 20; })
.then(x => { console.log(x); return 30; })
.then(x => { console.log(x); });
// 10 20 30

28. Promise.resolve(10)
.then(x => { console.log(x); return 20; })
.catch(x => { console.log(x); return 30; })
.then(x => { console.log(x); return 40; })
.then(x => { console.log(x); });

29. Promise.resolve(10)
.then(x => { console.log(x); return 20; })
.catch(x => { console.log(x); return 30; })
.then(x => { console.log(x); return 40; })
.then(x => { console.log(x); });
// 10 20 40

30. Kahoot #3
kahoot.com

31. Promise.reject(10)
.catch(x => { console.log(x); return 20; })
.then(x => { console.log(x); return 30; })
.catch(x => { console.log(x); return 40; })
.then(x => { console.log(x); });
// 10 20 30

32. Promise.resolve(10)
.then(x => { console.log(x); return 20; })
.then(x => { console.log(x); throw new Error(30); })
.then(x => { console.log(x); return 40; })
.catch(x => { console.log(x); return 50; });

33. Promise.resolve(10)
.then(x => { console.log(x); return 20; })
.then(x => { console.log(x); throw new Error(30); })
.then(x => { console.log(x); return 40; })
.catch(x => { console.log(x); return 50; });
// 10 20 Error(30)

34. reject(new Error(10))

35. Promise.reject(10)
.catch(x => console.log(x))
.catch(x => console.log(x))
.catch(x => console.log(x));

36. Promise.reject(10)
.catch(x => console.log(x))
.catch(x => console.log(x))
.catch(x => console.log(x));
// 10

37. Kahoot #4
kahoot.com

38. Promise.resolve(10)
.then(x => { console.log(x); return Promise.resolve(20); })
.then(x => { console.log(x); });
// 10 20

39. fetch('https://api.com/users/42')
.then(response => response.json())
.then(user => fetch(`https://api.github.com/users/${user.name}`))
.then(response => response.json())
.then(user => new Promise((resolve, reject) => {
// check out users projects
resolve();
}));

40. Promise.all([
Promise.resolve(10),
20,
Promise.resolve(30),
]);

41. Promise.all([
Promise.resolve(10),
20,
Promise.resolve(30),
]);
// [10 20 30]

42. promises keep state
be mindful of promises chaining
catch returns fulfilled promise if error not rethrown

43. Kahoot #5
kahoot.com

44. Promise.resolve(10).then(x => {
console.log(x);
return 20;
}).then(x => console.log(x));
Promise.resolve(30).then(x => {
console.log(x);
return 40;
}).then(x => console.log(x));
// 10 30 20 40

45. Promise.resolve(10).then(x => {
console.log(x);
return Promise.resolve(20);
}).then(x => console.log(x));
Promise.resolve(30).then(x => {
console.log(x);
return 40;
}).then(x => console.log(x));

46. Promise.resolve(10).then(x => {
console.log(x);
return Promise.resolve(20);
}).then(x => console.log(x));
Promise.resolve(30).then(x => {
console.log(x);
return 40;
}).then(x => console.log(x));
// 10 30 40 20

47. setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro'));
console.log('current');

48. setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro'));
console.log('current');
// current micro macro

49. Promise.reject(new Error(10));
VM7904:1 Uncaught (in promise) Error: 10
at <anonymous>:1:16
try {
Promise.reject(new Error(10));
} catch (error) {
console.log('caught error'); // will not be logged
}
VM7997:2 Uncaught (in promise) Error: 10
at <anonymous>:2:20

50. window.addEventListener('unhandledrejection', (event) => {
console.log('unhandled', event.reason);
});
p = new Promise(() => {
throw new Error(20);
});
// unhandled Error(20)

51. window.addEventListener('unhandledrejection', (event) => {
console.log('unhandled', event.reason);
});
p = new Promise(() => {
throw new Error(20);
});
setTimeout(() => {
p.catch(e => console.log('handling', e));
}, 1000);
// unhandled Error(20)
// handling Error(20)

52. window.addEventListener('unhandledrejection', (event) => {
console.log('unhandled', event.reason); // 1st
});
window.addEventListener('rejectionhandled', (event) => {
console.log('handled rejected', event.reason); // 5th
});
p = new Promise(() => {
throw new Error(20);
});
setTimeout(() => {
console.log('will handle'); // 2nd
p.catch(e => console.log('handling', e)); // 4th
console.log('handled'); // 3rd
}, 1000);

53. async function foo() {
return 1;
}
foo().then(x => console.log(x));
// 1
async function foo() {
return Promise.resolve(1);
}
foo().then(x => console.log(x));
// 1

54. async function foo() {
return 1;
}
foo().then(x => console.log(x));
// 1
async function foo() {
console.log('before');
const result = await p();
console.log('after', result);
}
async function foo() {
return Promise.resolve(1);
}
foo().then(x => console.log(x));
// 1
async function foo() {
console.log('before');
const result = await p();
console.log('after', result);
}

55. Kahoot #6
kahoot.com

56. (async () => {
setTimeout(() => console.log('timeout'), 0);
await f(); // another async function, execution duration: 5s
console.log('after await');
})();
// after await timeout

57. async function prepareDinner(meatType = 'fish') {
const dinner = await prepareBaseDinner();
const meat = await selectMeat(meatType);
const wine = await selectWine(meat.getWineType());
dinner.addMeat(meat);
dinner.addWine(wine);
return dinner;
}

58. async function prepareDinner(meatType = 'fish') {
const dinner = await prepareBaseDinner();
const meat = await selectMeat(meatType);
const wine = await selectWine(meat.getWineType());
dinner.addMeat(meat);
dinner.addWine(wine);
return dinner;
}
// |-------dinner------->|---meat--->|---wine--->|

59. function prepareDinner(meatType = 'fish') {
const dinnerPromise = prepareBaseDinner();
const meatPromise = selectMeat(meatType);
const winePromise = meatPromise.then(meat => {
return selectWine(meat.getWineType());
});
return Promise.all([ dinnerPromise, meatPromise, winePromise ]).then(
([ dinner, meat, wine ]) => {
dinner.addMeat(meat);
dinner.addWine(wine);
return dinner;
}
);
}

60. function prepareDinner(meatType = 'fish') {
const dinnerPromise = prepareBaseDinner();
const meatPromise = selectMeat(meatType);
const winePromise = meatPromise.then(meat => {
return selectWine(meat.getWineType());
});
return Promise.all([ dinnerPromise, meatPromise, winePromise ]).then(
([ dinner, meat, wine ]) => {
dinner.addMeat(meat);
dinner.addWine(wine);
return dinner;
}
);
}
// |-------dinner------->|
// |---meat--->|---wine--->|

61. microtasks have priority over macrotasks
unhandled rejection can be monitored
mind handling unhandled rejections
async can execute synchronous code if not used correctly

62. Are there alternatives?
Tasks
data.task - https://github.com/folktale/data.task
Fluture - https://github.com/fluture-js/Fluture
RxJS
https://rxjs-dev.firebaseapp.com/

63. What are the differences?
Promises Tasks RxJS
eager lazy lazy
not cancellable cancellable cancellable
multiple observers, single
return value
single observer, single return
value
multiple observers, multiple
return values

64. Kahoot Finals
kahoot.com

65. For bedtime readers ;)
Promises and async / await - examples and problems
https://javascript.info/async
Async / await - performance caveats
https://medium.com/@bluepnume/even-with-async-await-you-probably-still-need-
promises-9b259854c161
Tasks (and inner links to good RxJS article)
https://medium.com/@yannickdot/taming-the-async-beast-using-tasks-e62675dde
9c

66. Q & A
sli.do - #sphereit - JSSphere

67. Thank you!
A Promise is a Promise - Mateusz Bryła