Let us start with a small task and sending one request using Axios itself. First, we import axios and define the API/URL we want to load from.

import axios from 'axios'; let one = "https://api.storyblok.com/v1/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt"

After that, we define that we want to perform a GET request using axios on the above URL.

const requestOne = axios.get(one);

In requestOne we now do have an unresolved promise that we can use to finally execute the GET request and retrieve the response.

requestOne.then(response => { console.log(response) }).catch(error => { console.err(error) })

Since axios returns a Promise we can go for multiple requests by using Promise.all , luckily axios itself also ships with a function called all , so let us use that instead and add two more requests.

Again we define the different URLs we want to access.

import axios from 'axios'; let one = "https://api.storyblok.com/v1/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt" let two = "https://api.storyblok.com/v1/cdn/datasources/?token=wANpEQEsMYGOwLxwXQ76Ggtt" let three = "https://api.storyblok.com/v1/cdn/stories/vue?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt"

Then we define the method we want to perform on those URLs

const requestOne = axios.get(one); const requestTwo = axios.get(two); const requestThree = axios.get(three);

Now, instead of only performing one request we’re going to use the above mentioned axios.all to resolve the three requests we just defined.

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => { const responseOne = responses[0] const responseTwo = responses[1] const responesThree = responses[2] // use/access the results })).catch(errors => { // react on errors. })

Using our JS client

The Storyblok universal JS client is a configured instance of axios , so if you want to use the Storyblok JS SDK you can still use the same approach as shown above. Instead of axios.get we will use the client to set-up the requests though.

import axios from 'axios'; import StoryblokClient from 'storyblok-js-client'; const Storyblok = new StoryblokClient({ accessToken: 'wANpEQEsMYGOwLxwXQ76Ggtt', cache: { clear: 'auto', type: 'memory' } }) const requestOne = Storyblok.get('cdn/stories' + 'health', { version: "published" }) const requestTwo = Storyblok.get('cdn/datasources', { version: "published" }) const requestThree = Storyblok.get('cdn/stories' + 'vue', { version: "published" }) axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => { const responseOne = responses[0] const responseTwo = responses[1] const responesThree = responses[2] // use/access the results })).catch(errors => { // react on errors. })

Copy paste the full example

Totally understand that you want to copy and paste the whole example, so here you go:

import axios from 'axios'; let one = "https://api.storyblok.com/v1/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt" let two = "https://api.storyblok.com/v1/cdn/datasources/?token=wANpEQEsMYGOwLxwXQ76Ggtt" let three = "https://api.storyblok.com/v1/cdn/stories/vue?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt" const requestOne = axios.get(one); const requestTwo = axios.get(two); const requestThree = axios.get(three); axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => { const responseOne = responses[0] const responseTwo = responses[1] const responesThree = responses[2] // use/access the results })).catch(errors => { // react on errors. })

Codesandbox Example