Implementing the async/await syntax for promise request JavaScript
Recently, I got deeper into the JavaScript language using NodeJS, Express, and ReactJS. One of the confused concepts for me was promises, maybe because the syntax is a little bit complex to understand at first. Thanks to ES2017, I now have a better understanding of how promises work in my code. In this post, I will share some steps to convert the regular fetch function to the ES2017 syntax, which will make it easy for you to implement in the future.
Pre-requisites:
This article assumes that you are familiar with JavaScript and ReactJS, and you are using the latest version of chrome or internet explorer.
Let’s suppose that we have this fetch request from our Backend-API
The complexity at the above request is that we have two promises — one that is responsible for hitting the backend server, and another one that is responsible for converting the response into a JSON object. So, practically, the first response has to be resolved — calling the json() function into the data to be able to see the response in a JSON object.
Refactoring steps
There are some steps you can follow to apply the new ES2017 syntax to the previous fetch request as a refactor for more clarity.
Step 1: Identify the function that is responsible for the async request. In our case, it will be the whole block of fetchData(). Put the word async in front of the function that we are about to declare which has the asynchronous request.
Step 2: Identify all the different promises that are created within that function. Here, as discussed before we have two promises, one with the fetch and another with the json() call. Put await keyword in front of the fetch and instead of . then() function.
Step 3: Assign the resolved value of fetch and json to an intermediate value.
Step 4: Refactor the rest of the function to look essentially synchronous in nature using arrow function.
Utilize async/await syntax with axios library
When developing an application using React and Redux, usually people tend to use a library called Axios to make life easier while working with promises. In the following example, I will show you how to implement the ES2017 syntax as easy as the previous example.
Final shape after clean up would be:
Conclusion
ES2017 is cool and makes things more clear and increases code readability. I am trying to dive deeper once I get the chance that’s why I wanted to document any tips and hints that can help a developer to digest any new material. I hope that I could describe the theory for you and make it clear to understand. If you liked my post, please follow me here on Medium or leave a comment. You can follow me on twitter @salmaneg. Thanks for reading!!!
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
