Higher-Order Promises

A promise is a container you get immediately for a value you get eventually. But a promise is also a value itself, and you can pass it around and return it from functions. What cool things do we get from treating our promises this way?

Talk given at CodeMash 2019

Transcript

1. Higher-Order Promises Neal Lindsay–@neall testdouble.com
2. Higher-Order Functions Promises Interesting
3. definitions !
4. Higher-Order Function takes a function returns a function and /or
5. doubler = mult(2) doubler(3) // 6 mult(5)(7) // 35 mult = (x) => (y) => x * y
6. a function in JavaScript is a value
7. " # $ Promise
8. fetch('/url') .then(r => r.json()) .then(v => console.log(v))
9. typical promise use obscures the promises
10. fetch('/url') // promise "a" .then(r => r.json() // promise "d" (maybe) ) // promise "b" .then(v => console.log(v)) // promise "c"
11. chaining style use of promises is %
12. a promise is also a value
13. takes a promise? returns a promise? what do you call a function that:
14. function that returns a promise: async function (effectively)
15. function that takes a promise: &
16. function that takes a promise: promise aggregator?
17. async function getInfo() { const r = await fetch('/url') const v = await r.json() console.log(v) }
18. async
19. async gets you two things allows await guarantees promise
20. fetch() effectively async
21. " '
22. handler functions async functions functions that take promises
23. normal stuff first handler functions for .then() and .catch()
24. handler functions • are called once (at most) • are never called synchronously • only one is called if both are provided to a .then()
25. promise .catch(e => 'oops') .then(v => console.log(v))
26. promise .catch(e => 'oops') // ^ recovering from error .then(v => console.log(v))
27. const log = (v) => { console.log(v) return v } const errLog = (e) => { console.error(e) throw e }
28. promise .then(log, errLog) .then(doWhatever)
29. higher-order handler functions
30. const logWith = (m) => (v) => { console.log(m, v) return v } const errLogWith = (m) => (e) => { console.error(m, e) throw e }
31. promise .then(logWith('success:')) .catch(errLogWith('oops:')) .then(doWhatever)
32. const recoverWith = (v) => () => v fetch('/url') .then(r => r.json()) .catch(recoverWith({val: 1})) .then(doWhatever)
33. async functions
34. most promises are generated by .then() and .catch()
35. Promise.resolve("value")
36. Promise.resolve("value") Promise.reject( Error("d'oh!") )
37. new Promise( (resolve, reject) => { oldFunc((err, data) => { if (err) reject(err) resolve(data) }) } )
38. (but use util.promisify() in node)
39. const timeoutAfter = (ms) => new Promise((_, reject) => { setTimeout(() => { reject(Error( `Timed out after ${ms}` )) }, ms) })
40. Promise.race([ timeoutAfter(10000), fetch('/url') ]) .then(r => r.json()) .then(logWith('got it:')) .catch(errLogWith('nope:'))
41. higher-order async functions
42. read = util.promisify( fs.readFile )
43. const modalQuery = async (q) => {...} Promise .all([ modalQuery('accept privacy policy?'), modalQuery('accept code of conduct?') ]) .then(createAccount)
44. const lockify = (f) => { let lock = Promise.resolve() return (...params) => { const resultPromise = lock.then(() => f(...params)) lock = resultPromise.catch(() => 1) return resultPromise } }
45. const modalQuery = lockify( async (q) => {...} } Promise .all([ modalQuery('accept privacy policy?'), modalQuery('accept code of conduct?') ]) .then(createAccount)
46. cacheing
47. const promiseCache = (f, options) => { // way too much stuff for a slide! } const cachedFetch = promiseCache(fetch) cachedFetch('url').then(something) // ...time passes cachedFetch('url').then(somethingElse)
48. passing promises around
49. Promise.all([...]) and Promise.race([...])
50. Promise.all( ['a','b','c'].map((l) => fetch('/'+l) .then((r) => r.json()) ) )
51. Promise.race( ['a','b','c'].map((l) => fetch('/'+l) ) ) .then((r) => r.json())
52. Promise.race( ['a','b','c'].map((l) => fetch('/'+l) ) ) .then((r) => r.json())
53. retry
54. function retry (tries, f) { if (tries < 2) return f return (...params) => f(...params) .catch(() => retry(tries - 1, f)(...params) ) } persistentFetch = retry(3, fetch)
55. cancelable?
56. // too big to show in a slide const c = makeCancelable() c(fetch(url)) .then(r => c(r.json())) .then(doSomething) // ...later c.cancel('never mind')
57. Race to Success? (let's build it)
58. Promise.race( servers.map((server) => fetch(server) .then((r) => r.json()) ) ) // rejected!
59. const waitForever = () => new Promise() const firstGood = (ps) => { return Promise.race( ps.map(p => p.catch(waitForever) ) ) }
60. const waitForever = () => new Promise() const firstGood = (ps) => { return Promise.race( ps.map(p => p.catch(waitForever) ) ) } // if they all fail... (
61. const firstGood = (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)) ) }) } // )
62. sorry for all that dense code!
63. Higher-Order Promises Neal Lindsay–@neall testdouble.com