Refactoring Fetch to Async/Await

Clean up your code to make your API requests easier to understand and debug

Photo by Dave Francis on Unsplash.

Async/await is one of the most revolutionary features that has been added to JavaScript in the past few years. It offers an intuitive replacement to the syntactical mess that promises sometimes tend to be.

There is nothing wrong with the good old Fetch API, which is made available by default to make ajax requests and more.

“The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.” — MDN web docs

A basic fetch request is really simple to set up. Take a look at the following code:

Async/Await 101

Async/await is a relatively new (part of the so-called ECMAScript 2017 JavaScript edition) way to write asynchronous code. Previous alternatives for asynchronous code…