JavaScript IOUsUsing async & await in your JavaScript

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...

Overview

● Intro to Promises● async + await● Error Handling● Progression Example

async await

#devHumor

Promises = IOU for Future Action

● AJAX Call Returning Data

● Access a User’s Webcam

● Resizing an Image

Morning Routine

● Make Coffee● Drink Coffee● Cook Breakfast● Eat Breakfast

Start something, then come back when it’s done!

Browser APIs == Promises

Fetch()

PaymentRequest

GetUserMedia()

Web Animation API

We get it,Promises are GREAT!

buuuuuuttt...

What’s with the .then()?It’s kinda ‘callback-y’

Any code that needs to comeafter the Promise still needs to bein the final .then() callback.

async / await is still based on Promises, but it’s a cleaner syntax.

JavaScript is almost entirely Asynchronous / Non-Blocking

Great!But, that makes it hard to read/write.

PHP

JS

The PHP is easier to read.

The JS is more performant.

There’s got to be

a cleaner way...

Synchronouslooking code,

without the wait!

Slow...

… Fast!

FIRE

WAIT FOR BOTH

Option 1

Make SureErrors Don’t Happen

Why waste dev time on something that should never happen?#problemSolved

Option 2

Try / CatchWrap that sucker in a safety blanket

Option 3

Higher Order FunctionAsync functions can chain a .catch()

#showOff

Option 4

Handle the ErrorWhen You Call It

Option 5

Event-Based HandlingReally important if you’re working with Node.js

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)

I’m lost...

Thank you!