Stop Promise chaning with async/await

Categories Javascipt, NodeJs, Software Development

You look at someone´s other code and aks yourself how the fuck am I supposed to understand what he is doing with all those Promises chaning. You wonder how can that be done better and most of all better to read but also understand. Async/Await is here to save the day for you. Async/Await is a special syntax which makes working with promises more comfort it´s simply avoiding Promise chaning and it´s surprisingly easy to understand and use.


Async Keyword/Function

Now let´s move on and declare how we should use the syntax of Async/Await starting with the keyword async it can be placed before a function, like this. It works with the normal function´s but also with Arrow function´s.

The keyword async before a function simply means: this function is always returning a Promise. So let´s test out one of the above created functions. I´ll go on with the function modevArrowAsync :

We can append a .then on the function call because as we now know the async keyword before the function always returns a Promise. Let´s move on with the other keyword await that works only inside async functions.


Await Keyword

This keyword can only be used inside a function with is declared as async . What this keyword simply does -> it makes javascript wait until that promise is finished and returns its result.
The syntax:

Example of the functionality of await.

Fucntion call with await waits until the promise is finshed and then goes on with the code underneath. Remember await can only be uses in function with declared with the keyword async. So now let´s dive into a real world example. First I´m showing you the function without Async/Await.

This is the function without the keywords.

Now with the Keywords watch how easy it get´s to read the code in contrast to the example above.

Isn´t that easy to read? Much better than before.


Error handling

In case of rejection it throws the error, just if there is a throw statement in that line. So no need the explicit call reject but it does also work.
For example this code:

Is completly the same as:

Now some real world examples:

With try and catch we can easily throw an Error if something goes wrong with the API call. The await keyword cause that javascript needs to wait until the call to the API is finished. After that we are doing some calculation with the response from the API. After that we check if rate is a number, if not we throw an Error and the Promise gets rejected. The catch block catches an Error if something went wrong in the try block -> For example the API call went wrong.


Conclusion

The async keyword before a function has two effects:

  • Makes it always return a promise.
  • Allows to use await in it.

The await keyword before a promise makes JavaScript wait until that promise settles, and then:

If it’s an error, the exception is generated, same as if throw error were called at that very place.
Otherwise, it returns the result, so we can assign it to a value.

Together they provide a great framework to write asynchronous code that is easy both to read and write.

You now have an brief overview how to use Async and Await keywords. All the examples in this blog post have been showing examples, which is more than enough to begin with. If you want to take a look at other article I wrote feel free to visit my blog.

Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. Do you think this tutorial will be of help to someone? Do not hesitate to share. If you liked it, share it somewhere else or subscribe to my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *