Why I avoid async/await

Lies, damned lies, and async/await

Mark Twain
Lies, damned lies, and statistics

Fully Synchronous

const processData = ({ userData, sessionPrefences }) => {
save('userData', userData);
save('session', sessionPrefences);
return { userData, sessionPrefences }
}

Async/Await

const processData = async ({ userData, sessionPrefences }) => {
await save('userData', userData);
await save('session', sessionPrefences);
return { userData, sessionPrefences }
}

Promises

const processData = ({ userData, sessionPrefences }) =>   save('userData', userData)
.then(() => save('session', sessionPrefences))
.then(() => ({ userData, sessionPrefences })
const processData = ({ userData, sessionPrefences }) => Promise.all([
save('userData', userData),
save('session', sessionPrefences)
])
.then(() => ({ userData, sessionPrefences })
const processData = async ({ userData, sessionPrefences }) => {
await Promise.all([
save('userData', userData),
save('session',sessionPrefences)
])
return { userData, sessionPrefences }
}

Error handling

Fully Synchronous

const processData = ({ userData, sessionPrefences }) => {
try {
save('userData', userData);
save('session', sessionPrefences);
return { userData, sessionPrefences }
} catch (err) {
handleErrorSomehow(err)
}
}

Async/Await

const processData = async ({ userData, sessionPrefences }) => {
try {
await save('userData', userData);
await save('session', sessionPrefences);
return { userData, sessionPrefences }
} catch (err) {
handleErrorSomehow(err)
}
}

The deoptimized path

Promise

const processData = ({ userData, sessionPrefences }) =>   save('userData', userData)
.then(() => save('session', sessionPrefences))
.then(() => ({ userData, sessionPrefences })
.catch(handleErrorSomehow)
.catch(handleErrorSomehow)
const processData = ({ userData, sessionPrefences }) => Promise.resolve(save('userData', userData))
.then(() => save('session', sessionPrefences))
.then(() => ({ userData, sessionPrefences })
.catch(handleErrorSomehow)

One more thing…

Steve Jobs presenting in front of a screen that says “One more thing…”
const id = 5
const lotsOAsync = () => fetch('/big-o-list')
.then((result) => {
if (result.ok) {
return result.json().then((list) => {
const {url: itemURL } = data.items.find((item) => item.id === id)
return fetch(itemURL).then((result) => {
if (result.ok) {
return result.json().then((data) => data.name)
} else {
throw new Error(`Couldn't fetch ${itemURL}`)
}
})
})
} else {
throw new Error(`Couldn't fetch big-o-list`)
}
})
const id = 5
const lotsOAsync = () => fetch('/big-o-list')
.then((result) => result.ok ? result.json() : Promise.reject(`Couldn't fetch big-o-list`))
.then(({ items }) => items.find((item) => item.id === id))
.then(({url}) => fetch(url))
.then((result) => result.ok ? result.json() : Promise.reject(`Couldn't fetch ${result.request.url}`))
.then((data) => data.name)

Callback Hell 🔥

Promise.resolve(
Promise.resolve(
Promise.resolve(
Promise.resolve(
Promise.resolve(
Promise.resolve(5)
)
)
)
)
).then((val) => console.log(val))

Promise Heaven 👼

Promise.resolve()
.then(() => Promise.resolve())
.then(() => Promise.resolve())
.then(() => Promise.resolve())
.then(() => Promise.resolve())
.then(() => Promise.resolve(5))
.then((val) => console.log(val))
Promise.resolve(5)
.then((val) => val + 3)
.then((num) => String(num))
.then((str) => `I have ${str} llamas`)
.then((str) => /ll/.test(str))

TL;DR; But I did scroll.

The Princess Bride’s Inigo Montoya says; “Let me explain. No, there is too much. Let me sum up.
Let me explain. No, there is too much. Let me sum up.
  • Give better cues that we are in an asynchronous mental model
  • In simple cases express the code at least as cleanly as async/await
  • Provides a much cleaner option for more complex workflows that include error handling and parallelization.

--

--

--

Front End Engineer with deep technical expertise in JS, CSS, React, Frontend Architecture, and lots more. I lean functional, but I focus on maintainability.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Thank thunk

Faasos Clone

Laravel Basic Auth

Write a file server with only ONE line of code

Building blocks of Angular

Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]

Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]

How to make a gradient in Lottie (EASY)

Live Streaming Data Using Kafka, Node JS, WebSocket and Chart JS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cory

Cory

Front End Engineer with deep technical expertise in JS, CSS, React, Frontend Architecture, and lots more. I lean functional, but I focus on maintainability.

More from Medium

Stop Using JavaScript Classes!

Stop Using Function Parameters Now

Why you should avoid index.js?

How Microsoft Wants To Change TypeScript

Person who thinks about an idea