How To Make Parallel API calls in React Applications — Typescript Version

A Step by step guide with an example project

In web applications, all the data you show on the page should reside somewhere, for example, cache, database, storage account, etc. You need to fetch the data from the different sources and do some processing and then render the data on the UI. All the data can be accessed through APIs nowadays and most of the time the format would be in the JSON format.

Sometimes, making one API call is not enough you might need to get the data from different sources and these sources might be different APIs. We can make all the calls in parallel to decrease the latency of the application.

In this post, we will see how to make parallel API calls in React (Written in Typescript) applications using Fetch and Axios. You can do API calls with either of these.

• Prerequisites
• Example Project
• API Endpoints
• UI Implementation and Integration
• Call The APIs with Fetch and Promise.all
• Call The APIs with Axios and Promise.all
• Demo
• Summary
• Conclusion

Prerequisites