How to send multiple requests using axios

Contents

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


About the author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.


More to read...