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 Vue applications (written in typescript) 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
There are some prerequisites for this article. You need to have NodeJS installed on your laptop and know-how HTTP works. If you want to practice and run this on your laptop you need to have these on your machine.
Please go through these links if you are new to web development and make sure you understand how UI and API work together.
How To Develop and Build Vue.js App With NodeJS
How To Make API calls in Vue.JS Applications
Example Project
Here is the example project in which we are making three API calls and combining them and loading the table. Those three calls take different times to complete.
// clone the project
git clone…
Top comments (0)