JavaScript Promises vs Async Await
Promise.then().catch() vs. async, await, try, catch
Promises are an essential JavaScript feature for building websites, apps, and PWA with JavaScript.
What can a Promise do?
Whenever tasks should be executed asynchronously, Promises are used. Asynchronously for our purposes means at-the-same-time, while synchronously refers to one-after-the-other.
Some use-cases for Promises are far-reaching:
- fetching external data
- write data to file
- read data from a file
- write data to a database
- calling external APIs
- waiting for user input
- fetching multiple data sources at the same time
- (I’m sure you can think of many more)
Alternative: Callback?
Often callbacks can be used as alternatives to promises, but callbacks have some distinct disadvantages over promises in many use-cases. I will explore JS callback vs. promise in next week’s article, so stay tuned.
Example: Fetching Data
Let’s say we’re using the popular BaaS, Firebase, and its document-based database Firestore.
We want to fetch the user document and an article, both stored in Firestore:
First, we get a reference to Firestore(2). Then we create two promises for the user(4) and article(5) document by calling get() on two Firestore document references.
Now, you have two distinct options for processing these promises to show the fetched data in your app. ⬇️
Option 1: promise.then().catch()
userPromise.then(() => "data was fetched").catch(() => "error fetching data")
promise.then(then_func): The function passed to the promise’s then() method,then_func()is called when the promise is resolved. Promise results are passed as a parameter tothen_func.promise.catch(catch_func): The function passed to the promise’s catch() method,catch_func()is called when an error is thrown during executing the promise. The error is passed as a parameter tocatch_func.
Option 1, promise.then(then_func).catch(catch_func), allows you to pass functions for the cases of completion (then()) and erroneous termination (catch()) of a promise.
Using then() it’s also easy to chain promises.
Option 2: async, await, try, catch
Instead of using promise.then().catch(), you can also use async, await, try, and catch for receiving the same results.
Async, await, try, and catch signal different actions to the JavaScript interpreter:
async: Marks that the following code block includes await-calls.await: Marks promise calls to wait for promise completion.try: Wraps around code that can fail (like awaiting promises 😉) and pass the error tocatch()instead of crashing the app.catch: Called when a try block fails. The error is passed as a parameter.
Option 2, async, await, try, and catch, allows you to write promises very similar to writing synchronous programs.
Chaining promises is even easier than when using option 1 since await always waits for the promise to finish.
Conclusion
Both option 1 and option 2 allow you to execute and evaluate promises. For simple use-cases your preference plays the deciding role.
Teaser: Simultaneously Running Promises
Check out this small teaser of next weeks article for running and evaluating independent promises simultaneously: https://gist.github.com/abegehr/78ff807ecb9c3cc9359a0d9b9fa1ad39 — stay tuned 👍
Thanks for Reading 👏
Follow me on Medium and IG for more content: https://www.instagram.com/antonbegehr/
A note from JavaScript In Plain English
We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!
We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.
