How to send multiple requests using axios
Storyblok is the first headless CMS that works for developers & marketers alike.
In case you need to retrieve information from multiple data sources or multiple API endpoints, you can use Axios or our Javascript SDK (https://github.com/storyblok/storyblok-js) to retrieve make HTTP calls simultaneously, in parallel.
Performing multiple HTTP requests with Axios
In this article, we will see how you can achieve concurrent execution of HTTP calls by taking advantage of the Promise feature. First, make sure you have installed Axios:
npm install axios
Now we installed Axios, let's start with a small task and send one request using Axios. In the example, we will set one URL for accessing the Content Delivery API (version 2) provided by Storyblok.
import axios from "axios";
// Set the URL to access
let token = "wANpEQEsMYGOwLxwXQ76Ggtt";
let version = "published";
let url =
`https://api.storyblok.com/v2/cdn/stories/health?` +
`version=${version}&token=${token}`;
/*
| Perform the HTTP get request via Axios
| It returns a Promise immediately,
| not the response
*/
const request = axios.get(url);
/*
| For waiting the Promise is fulfilled
| with the Response use the then() method.
| If the HTTP request received errors
| use catch() method
*/
request
.then((response) => {
console.info(response.data.story);
})
.catch((error) => {
console.err(error);
});
First, we import Axios and define the API/URL we want to load from. Then, we can call the get() method. Because the get() method is asynchronous, a Promise object is returned. With the Promise object, we can set the callback for managing the fulfilled response via the then() method. To manage also the error, we can use the catch() method.
Since axios returns a Promise, we can go for multiple requests using Axios.all().
Then, we define the different URLs we want to access.
import axios from "axios";
// Set the URLs to access
let urls = [
"https://api.storyblok.com/v2/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt",
"https://api.storyblok.com/v2/cdn/datasources/?token=wANpEQEsMYGOwLxwXQ76Ggtt",
"https://api.storyblok.com/v2/cdn/stories/vue?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt",
];
/*
| Perform the HTTP get request via Axios
| It returns a Promise immediately,
| not the response
*/
const requests = urls.map((url) => axios.get(url));
/*
| For waiting the Promise is fulfilled
| with the Response, use the then() method.
| If the HTTP request received errors
| use catch() method
*/
axios.all(requests).then((responses) => {
responses.forEach((resp) => {
let msg = {
server: resp.headers.server,
status: resp.status,
fields: Object.keys(resp.data).toString(),
};
console.info(resp.config.url);
console.table(msg);
});
});
We defined a list of URLs as an array. Using map() method, we call multiple axios.get() for each URL in the array. Then, in the requests array, we have the list of the promises, one Promise object for each request sent. Then with axios.all() we obtain all the fullfilled responses from all the requests. All the requests are sent in parallel.
Performing multiple HTTP requests using the Storyblok Javascript SDK
Our Javascript SDK depends on the Storyblok universal JS client version 5, which uses the new fetch() method instead of Axios. But don't worry, our SDK can also return a Promise, so you can achieve the same level of concurrency in the same way, achievable through Axios. So you can use the same approach shown above, setting up the promises for all the requests. Once you have installed the Storyblok Javascript SDK:
npm install @storyblok/js
You can write your code for performing multiple parallel requests:
import { storyblokInit, apiPlugin } from "@storyblok/js";
// Set the URL paths to access
let paths = ["cdn/stories/health", "cdn/datasources", "cdn/stories/vue"];
/*
| Initialize the StoryblokClient once
*/
const { storyblokApi } = storyblokInit({
accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt",
use: [apiPlugin],
});
/*
| Perform the HTTP get request via get() method
| provided by storyblokApi.
| It returns a Promise immediately,
| not the response
*/
const requests = paths.map((path) =>
storyblokApi.get(path, { version: "published" })
);
/*
| For waiting the Promise is fulfilled
| with the Response, you can use Promise.all and
| use the then() method.
| If the HTTP request received errors
| use catch() method
*/
Promise.all(requests).then((responses) => {
responses.forEach((resp) => {
console.log(resp.data);
});
});
In the code we followed some steps:
- Import
storyblokInitandapiPluginfrom our SDK@storyblok/js; - Define the set of URL/path as array;
- initializing the SDK via
storyblokInit()using the token for your space; - Calling the
storyblokApi.get()method for all the URLs/paths set at point 2 (avoiding using the await) - Manage all the promises returned by point 4 via
Promise.all().then().
Executing multiple HTTP calls concurrently can reduce the total response time, improving the performance of the execution of the logic you implement.
Curious to keep learning?
Check out Storyblok, bringing you the latest tech solutions to stay on top of your game
