Promises are _Fun_damental

A JavaScript promise is a handy container for a value you expect to get later. But a promise is also a value itself, and you can do some useful stuff just knowing you have a promise.

As given at the 2018-07-18 Columbus Javascript user group meeting (plus a couple of typo fixes).

Transcript

1. Promises are Fundamental!
3. like a fundamental particle ⚛
4. typical promise use obscures the promises
5. fetch('/url') .then(r => r.json()) .then(v => console.log(v))
6. fetch('/url') // promise "a" .then(r => r.json() // promise "d" (maybe) ) // promise "b" .then(v => console.log(v)) // promise "c"
7. chaining style use of promises is
8. a promise is itself a value
9. const myStr = "hello " console.log(myStr.trim()) console.log(myStr + "world")
10. const myNumber = 9 console.log(myNumber + 3) console.log( Math.sqrt(myNumber) )
11. const myFunc = (x) => x + 1 const twice = (f) => (x) => f(f(x)) console.log( twice(myFunc)(0) )
12. higher order function: takes a function as a param and/or returns a function
13. what can we do with promises?
14. • handler functions • higher-order handler functions • async functions • higher-order async functions • aggregation
15. normal stuff: handler functions for .then() and .catch()
16. promise .catch(e => 'oops') .then(v => console.log(v))
17. promise .catch(e => 'oops') // ^ recovering from error .then(v => console.log(v))
18. const log = (v) => { console.log(v) return v } const errLog = (e) => { console.error(e) throw e }
19. promise .then(log, errLog) .then(doWhatever)
20. higher-order handler functions
21. const logWith = (m) => (v) => { console.log(m, v) return value } const errLogWith = (m) => (e) => { console.error(m, e) throw e }
22. promise .then(logWith('success:')) .catch(errLogWith('oops:')) .then(doWhatever)
23. const recoverWith = (v) => () => v fetch('/url') .then(r => r.json()) .catch(recoverWith({val: 1})) .then(doWhatever)
24. async functions
25. fetch('https://example.com/') // ^ not technically an // async function ¯\_(ツ)_/¯
26. // always rejects after ms const timeoutAfter = async (ms) => new Promise((_, reject) => { setTimeout(() => { reject(Error( `Timed out after ${ms}` )) }, ms) })
27. // too big to show in a slide const c = cancelable() c(fetch(url)) .then(r => c(r.json())) .then(doSomething) c.cancel('never mind')
28. higher-order async functions
29. const modalQuery = async (q) => {...} Promise .all([ modalQuery('accept privacy policy?'), modalQuery('accept code of conduct?') ]) .then(createAccount)
30. const lockify = (f) => { let lock = Promise.resolve() return async (...params) => { const result = lock .then(() => f.apply(undefined, params)) lock = result.catch(() => 1) return result } }
31. const promiseCache = async (f, options) => { // way too much stuff for a slide! } const cachedFetch = promiseCache(fetch) cachedFetch('url').then(something) cachedFetch('url').then(somethingElse)
32. aggregating promises
33. // Aggregate promises Promise.all( ['a','b','c'].map((l) => fetch('/'+l) .then((r) => r.json()) ) )
34. // Only need the fastest? Promise.race( ['a','b','c'].map((l) => fetch('/'+l) .then((r) => r.json()) ) )
35. // What about rejections?! Promise.race( ['a','b','c'].map((l) => fetch('/'+l) .then((r) => r.json()) ) ) // rejected!
36. const hang = () => new Promise() const firstGood = (ps) => { return Promise.race( ps.map(p => p.catch(hang)) ) }
37. const hang = () => new Promise() const firstGood = (ps) => { return Promise.race( ps.map(p => p.catch(hang)) ) } // if they all fail...
38. const firstGood = async (ps) => { return new Promise((resolve, reject) => { ps.forEach(p => p.then(resolve)) Promise.all(ps) .catch(e => Promise .all(ps.map(p => p.catch(() => 0))) .then(() => reject(e)) ) }) } //
39. sorry for all that dense code!
40. Promises are Fundamental Neal Lindsay–@neall testdouble.com