meet.js Katowice - ES6 Promises 101

Transcript

1. SZYMON NOWAK @SZIMEK ES6 PROMISES 101
2. ISSUES WITH ASYNC CODE
3. sum(1, 5, (x) => { multiply(x, 3, (y) => { subtract(y, 5, (z) => { console.log('The result is', z); }); }); });
4. sum(1, 5) .then((x) => multiply(x, 3)) .then((x) => subtract(x, 5)) .then((x) => { console.log('The result is', x) });
5. img = document.querySelector('#img'); img.addEventListener('load', onLoaded); img.addEventListener('error', onError);
6. img = document.querySelector('#img'); img.ready().then( onLoaded, onError );
7. PROMISES
8. 3 POSSIBLE STATES
9. PENDING
10. PENDING RESOLVED
11. PENDING RESOLVED REJECTED
12. PENDING -> RESOLVED
13. PENDING -> REJECTED
14. STATE CAN CHANGE ONLY ONCE
15. promise = new Promise(fn);
16. promise = new Promise((resolve, reject) => { ... });
17. promise = new Promise((resolve, reject) => { // do something async... if (success) { resolve(result); } else reject(reason); } });
18. THEN
19. promise.then(onResolve)
20. promise = new Promise((resolve, reject) => { setTimeout(() => resolve(42), 2000); }); function onResolve(result) { console.log(`Resolved with ${result}`); } promise.then(onResolve);
21. promise = new Promise((resolve, reject) => { setTimeout(() => resolve(42), 2000); }); function onResolve(result) { return result + 10; } promise .then(onResolve) .then(doSomething) .then(doSomethingElse);
22. sum(1, 5, (x) => { multiply(x, 3, (y) => { subtract(y, 5, (z) => { console.log('The result is', z); }); }); });
23. sum(1, 5) .then((x) => multiply(x, 3)) .then((x) => subtract(x, 5)) .then((x) => { console.log('The result is', x) });
24. promise.then(onResolve)
25. promise.then(onResolve, onReject)
26. img = document.querySelector('#img'); img.addEventListener('load', onLoaded); img.addEventListener('error', onError);
27. img = document.querySelector('#img'); img.ready().then( onLoaded, onError );
28. CATCH
29. promise.catch(onReject); // is the same as promise.then(undefined, onReject);
30. PROMISE.RESOLVE
31. function authenticate() { if (user) { return Promise.resolve(user); } return fetchUser(); } authenticate().then((user) => ...)
32. PROMISE.REJECT
33. PROMISE.ALL
34. Promise.all([p1, p2]).then(([r1, r2]) => { // executed when all promises are resolved });
35. const urls = [...]; const promises = urls.map(fetch); Promise.all(promises).then((responses) => { // executed when all responses are ready });
36. PROMISE.RACE
37. Promise.race([ fetch(url), delay(5000).then(() => throw new Error('Timed out’) ) ]);
38. ERROR HANDLING
39. new Promise((resolve, reject) => { throw new Error(‘bazinga!’); }); // exception inside promises // are translated to rejections
40. new Promise((resolve, reject) => { try { throw new Error(‘bazinga!’); } catch(error) { reject(error); } });
41. const promise = fetch(url); promise .then(step1) .then(step2) .then(step3) .catch(onError) .then(step4)
42. fetch(url) .then(onSuccess, onError); // is not the same as fetch(url) .then(onSuccess) .catch(onError);
43. ISSUES
44. CANNOT BE CANCELLED
45. CANNOT BE USED WITH STREAMS OF DATA
46. NATIVE APIS
47. FETCH WEBRTC SERVICE WORKER …
48. THANK YOU!