javascript ious - smart data · 2019-12-20 · promises = iou for future action ajax call returning...
TRANSCRIPT
![Page 1: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/1.jpg)
JavaScript IOUsUsing async & await in your JavaScript
![Page 2: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/2.jpg)
Who Am I?
Kris HatcherDevelopment Lead
4.5 years at Smart Data
9 years experience in JavaScript
I’ll let you know when I figure it out...
![Page 3: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/3.jpg)
Overview
● Intro to Promises● async + await● Error Handling● Progression Example
![Page 4: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/4.jpg)
async await
#devHumor
![Page 5: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/5.jpg)
Promises = IOU for Future Action
● AJAX Call Returning Data
● Access a User’s Webcam
● Resizing an Image
![Page 6: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/6.jpg)
Morning Routine
● Make Coffee● Drink Coffee● Cook Breakfast● Eat Breakfast
Start something, then come back when it’s done!
![Page 7: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/7.jpg)
![Page 8: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/8.jpg)
![Page 9: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/9.jpg)
![Page 10: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/10.jpg)
Browser APIs == Promises
Fetch()
PaymentRequest
GetUserMedia()
Web Animation API
![Page 11: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/11.jpg)
![Page 12: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/12.jpg)
![Page 13: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/13.jpg)
We get it,Promises are GREAT!
buuuuuuttt...
![Page 14: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/14.jpg)
What’s with the .then()?It’s kinda ‘callback-y’
![Page 15: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/15.jpg)
Any code that needs to comeafter the Promise still needs to bein the final .then() callback.
![Page 16: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/16.jpg)
async / await is still based on Promises, but it’s a cleaner syntax.
![Page 17: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/17.jpg)
![Page 18: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/18.jpg)
![Page 19: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/19.jpg)
JavaScript is almost entirely Asynchronous / Non-Blocking
Great!But, that makes it hard to read/write.
![Page 20: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/20.jpg)
PHP
![Page 21: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/21.jpg)
JS
![Page 22: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/22.jpg)
The PHP is easier to read.
The JS is more performant.
There’s got to be
a cleaner way...
![Page 23: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/23.jpg)
Synchronouslooking code,
without the wait!
![Page 24: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/24.jpg)
![Page 25: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/25.jpg)
![Page 26: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/26.jpg)
Slow...
![Page 27: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/27.jpg)
… Fast!
FIRE
WAIT FOR BOTH
![Page 28: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/28.jpg)
Option 1
Make SureErrors Don’t Happen
Why waste dev time on something that should never happen?#problemSolved
![Page 29: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/29.jpg)
Option 2
Try / CatchWrap that sucker in a safety blanket
![Page 30: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/30.jpg)
![Page 31: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/31.jpg)
Option 3
Higher Order FunctionAsync functions can chain a .catch()
![Page 32: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/32.jpg)
![Page 33: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/33.jpg)
#showOff
![Page 34: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/34.jpg)
![Page 35: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/35.jpg)
Option 4
Handle the ErrorWhen You Call It
![Page 36: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/36.jpg)
![Page 37: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/37.jpg)
Option 5
Event-Based HandlingReally important if you’re working with Node.js
![Page 38: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/38.jpg)
![Page 39: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/39.jpg)
Tips & Tricks
● Write new APIs in Promises● Use async + await for flow control● Convert older APIs with Promisify● Choose an error handling strategy (or 2)
![Page 40: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/40.jpg)
I’m lost...
![Page 41: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/41.jpg)
![Page 42: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/42.jpg)
![Page 43: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/43.jpg)
![Page 44: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/44.jpg)
![Page 45: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/45.jpg)
![Page 46: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/46.jpg)
![Page 47: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/47.jpg)
![Page 48: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/48.jpg)
![Page 49: JavaScript IOUs - Smart Data · 2019-12-20 · Promises = IOU for Future Action AJAX Call Returning Data Access a User’s Webcam Resizing an Image. Morning Routine Make Coffee](https://reader034.vdocuments.us/reader034/viewer/2022042803/5f488f604b0df4523462e5a9/html5/thumbnails/49.jpg)
Thank you!