![Page 1: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/1.jpg)
Intro to Javascript PromisesMark Zhang
![Page 2: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/2.jpg)
![Page 3: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/3.jpg)
Technology that brings transparency to complex systems
![Page 4: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/4.jpg)
Strategic Investors
![Page 5: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/5.jpg)
Come work with us!
●●●●
![Page 6: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/6.jpg)
Outline
●●●●
![Page 7: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/7.jpg)
What are Promises?
![Page 8: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/8.jpg)
Promises are a way of dealing with eventual values.
![Page 9: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/9.jpg)
Immediate vs Eventual Values
![Page 10: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/10.jpg)
Immediate Values
![Page 11: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/11.jpg)
Immediate Values
![Page 12: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/12.jpg)
Immediate Values
Value immediately available
![Page 13: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/13.jpg)
Eventual values aren’t available immediately.
![Page 14: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/14.jpg)
Eventual Values
![Page 15: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/15.jpg)
Eventual Value (State Machine)
Not Ready
Error Ready
![Page 16: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/16.jpg)
Eventual Values
When getData() finishes, the data isn’t ready yet.
![Page 17: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/17.jpg)
Eventual Values
DOESN’T WORK!!!
![Page 18: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/18.jpg)
Eventual Values
No way to get ‘hello’ here.It’s not available yet.
![Page 19: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/19.jpg)
We need some way to handle eventual values once they’re ready.
![Page 20: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/20.jpg)
One approach is to assign a callback function to handle the value
when it’s ready.
![Page 21: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/21.jpg)
Callbacks
![Page 22: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/22.jpg)
This is known as continuation-passing style (CPS).
![Page 23: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/23.jpg)
A better approach is to use Promises.
![Page 24: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/24.jpg)
Promises capture the notion of an eventual value in an object.
![Page 25: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/25.jpg)
Eventual Value (State Machine)
Not Ready
Error Ready
![Page 26: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/26.jpg)
Promise (State Machine)
Pending
Rejected Resolved
Waiting for value to be ready
with an error with the value
![Page 27: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/27.jpg)
CPS Callbacks handle eventual values. Promises ARE eventual values.
![Page 28: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/28.jpg)
When getData() finishes, the eventual value isn’t ready yet.
![Page 29: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/29.jpg)
But we can return the eventual value itself as a Promise!
![Page 30: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/30.jpg)
![Page 31: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/31.jpg)
Promises
Attach a handler to the Promise.
![Page 32: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/32.jpg)
Promises
This is run when Promise is resolved.
![Page 33: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/33.jpg)
So far...
●●
●
![Page 34: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/34.jpg)
Exercise 1
![Page 35: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/35.jpg)
Exercise 1
![Page 36: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/36.jpg)
Promise API Deep Dive
![Page 37: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/37.jpg)
Outline
●●●●
![Page 38: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/38.jpg)
Promise.then()
![Page 39: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/39.jpg)
Promise.then()
![Page 40: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/40.jpg)
then(successHandler, errorHandler)
![Page 41: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/41.jpg)
Pending
Rejected Resolved
Waiting for value to be ready
with an error with the value
successCallback is runerrorCallback is run
![Page 42: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/42.jpg)
Example
‘5’ is printed
![Page 43: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/43.jpg)
Example
‘failure’ is printed
![Page 44: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/44.jpg)
Promise.then returns another Promise.
![Page 45: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/45.jpg)
![Page 46: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/46.jpg)
This returns another promise, which is resolved when multiplyByTwo returns.
![Page 47: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/47.jpg)
![Page 48: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/48.jpg)
![Page 49: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/49.jpg)
![Page 50: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/50.jpg)
You can chain handlers with “then”.
![Page 51: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/51.jpg)
![Page 52: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/52.jpg)
![Page 53: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/53.jpg)
Return a promise
![Page 54: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/54.jpg)
What you expect...
Return a promise
Resolved with a promise.
val is a promise
![Page 55: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/55.jpg)
Mirrors behavior
![Page 56: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/56.jpg)
val = 10
![Page 57: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/57.jpg)
You can return a Promise in a successHandler, and the next “then”
will receive the resolved value.(MAGIC!)
![Page 58: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/58.jpg)
Useful for multi-step fetches
![Page 59: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/59.jpg)
Summary of then
●●
![Page 60: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/60.jpg)
Promise.catch()
![Page 61: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/61.jpg)
Promise.catch()
![Page 62: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/62.jpg)
catch(errorHandler) is the same as then(undefined, errorHandler)
![Page 63: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/63.jpg)
If a Promise is rejected, all then’s are skipped until the next catch.
![Page 64: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/64.jpg)
![Page 65: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/65.jpg)
After a catch, the promise chain recovers.
![Page 66: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/66.jpg)
![Page 67: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/67.jpg)
![Page 68: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/68.jpg)
Summary of catch
●●
![Page 69: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/69.jpg)
Exercise 2
![Page 70: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/70.jpg)
Exercise 2
![Page 71: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/71.jpg)
Promise.all()
![Page 72: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/72.jpg)
Promise.all()
![Page 73: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/73.jpg)
![Page 74: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/74.jpg)
Many more Promise functions in libraries like Bluebird or Q.
![Page 75: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/75.jpg)
Promise constructor
![Page 76: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/76.jpg)
Promise constructor
![Page 77: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/77.jpg)
Constructor takes executor function:function (resolve, reject) { … }
![Page 78: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/78.jpg)
![Page 79: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/79.jpg)
![Page 80: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/80.jpg)
Resolves promise once eventual value is ready.
![Page 81: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/81.jpg)
Implementing getWithPromise
![Page 82: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/82.jpg)
![Page 83: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/83.jpg)
![Page 84: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/84.jpg)
![Page 85: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/85.jpg)
![Page 86: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/86.jpg)
![Page 87: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/87.jpg)
![Page 88: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/88.jpg)
![Page 89: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/89.jpg)
![Page 90: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/90.jpg)
Summary
●●●●
![Page 91: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/91.jpg)
Why are Promises cool?
![Page 92: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/92.jpg)
Promises are more flexible than CPS.
![Page 93: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/93.jpg)
When the eventual value is resolved...
![Page 94: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/94.jpg)
When the eventual value is resolved...
●
![Page 95: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/95.jpg)
When the eventual value is resolved...
● ●
●●●
![Page 96: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/96.jpg)
When the eventual value is resolved...
● ●
●●●
With sufficiently complex callbacks, you can technically do everything you can with Promises.
![Page 97: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/97.jpg)
As situations grow complex, Promises produce cleaner, shorter code than
CPS.
![Page 98: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/98.jpg)
![Page 99: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/99.jpg)
Use Promises for your GET and POST requests and save yourself future pain.
![Page 100: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/100.jpg)
Outline
●●●●
![Page 101: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/101.jpg)
Further Topics to Explore
![Page 102: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/102.jpg)
Check out window.fetch for Promise-based AJAX requests.
![Page 103: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/103.jpg)
Promises are supported natively, but check out Bluebird or Q for a fuller API.
![Page 104: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/104.jpg)
Further topics to explore
●●●
![Page 105: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/105.jpg)
Thanks!
![Page 106: Intro to Javascript Promises6.148.scripts.mit.edu/2017/pages/lectures/WEBday6_jspromises.pdf · Intro to Javascript Promises Mark Zhang. Technology that brings transparency to complex](https://reader030.vdocuments.site/reader030/viewer/2022040510/5e54b771ad377e59c2514ba1/html5/thumbnails/106.jpg)
Intro to Javascript PromisesMark Zhang