Introduction
Building web and mobile applications with Javascript is great! Within two seconds, you’ll need to fetch data from a web service or an application programming interface (API). With the rise of Nodejs, perhaps the API you’ll be using is also developed with Javascript. However, you will still have to fetch the data for your application.
Fetch is an in-built API for fetching resources within and across a network. Let’s see how fetch works.
Asynchronous Fetching (Promises)
The default means of fetching data with fetch is as a promise. Assuming our application needs to fetch information from a given url, here is one way our fetch can look.
All good, we have fetched our data and it is returned as an array — result.
What if we needed to make a second call to another API using the information retrieved from the first one? Well?
Herein lies the problem, using fetch as a promise can lead us into what is referred to as a “callback hell”. It can easily become difficult to track the callbacks involved in nested fetch. This is the first issue with using fetch as a promise.
The second issue becomes apparent when you attempt to retrieve more data from a group of results using a Javascript method such as Array.forEach.
This issue arises primarily because Array.forEach is synchronous, while fetch is asynchronous. While each element of the results array will be visited in order, forEach will return without the completion of fetch, thus leaving you empty-handed. One workaround to this issue is to use Array.reduce and Promises.all. On the bright side, using this method with a framework such as react may prove useful if your app doesn’t have to wait for all the data to load before rendering. Perhaps, you want the data to render as they come in, this does work perfectly for such a scenario.
However, if you want to wait for all the items to load, or just curious, read on!
Async…Await Fetch (ES6)
Thanks to ES6, we can use fetch, and be certain that the method has resolved before proceeding.
Adding async to the method, and await before calling fetch, provides us a much simpler use case of fetch.
And if you need to fetch more data using the returned result?
items will be an array containing the results of the second API call.
While this will wait for all calls to the second API to resolve before returning items, it will appear slower on your UI compared to the fetch using promises.
Conclusion
Both ways of using fetch will return the requested resources, however, depending on the use case, one method may be more suitable than the other.
Last week, the app I was building required all the data fetched to be returned before proceeding, thus I had to use async…await. Prior to that, I was comfortable using promises.
My personal preference now is to use async…await by default as it leads to cleaner, shorter code. There is also the extra added benefit of having the requested data/resource before proceeding.
