Axios not performing concurrent requests

Question

I'd like to make few requests to my backend through Vuex actions. It would be best if those requests could be done in parallel, because they fetch data that does not depend on other requests.

To make sure that my requests are not immediately returned, I added 3 seconds delay (server-side) to each api address to simulate long-running operations.

The problem I face is that requests are done sequentially and I don't quite know how to fix it. For two requests, there's always 6 seconds delay between 'Started' and 'Done' messages in the console, instead of ~3 seconds.

I'm not very experienced with web development, so few of my assumptions might be incorrect, but I've already stumbled upon requirement of returning axios methods from Vuex actions, which is also what I did.

This is my page:

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="Fetch data" color="primary" flat class="q-ml-sm" @click="loadData()" />
  </div>
</template>
<script>
export default {
  methods: {
    loadData() {
      console.log('Started');

      const commonData = [
        this.$store.dispatch('currency/fetchAll'),
        this.$store.dispatch('contractor/fetchAll'),
      ];

      return Promise
        .allSettled(commonData)
        .then(() => {
          console.log('Done!');
        });
    },
  },
};
</script>

This is how my Vuex actions are implemented:

import { axiosInstance } from 'boot/axios';

export function fetchAll() {
  return axiosInstance
    .get('currencies/')
    .then((response) => {
      this.commit('currency/assignNewData', response.data);
    });
}

import { axiosInstance } from 'boot/axios';

export function fetchAll() {
  return axiosInstance
    .get('contractors/')
    .then((response) => {
      this.commit('contractor/assignNewData', response.data);
    });
}

Axios exposure from boot/axios.js:

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080/api/rest/',
});

Vue.prototype.$axios = axiosInstance;

export { axiosInstance };

Even if I'd change calls from dispatch and replace it with axios calls like this:

const a = axiosInstance
  .get('currencies/')
  .then((response) => {
    console.log('a finished');
    this.commit('currency/assignNewData', response.data);
  });

const b = axiosInstance
  .get('contractors/')
  .then((response) => {
    console.log('b finished');
    this.commit('contractor/assignNewData', response.data);
  });

const commonData = [a,b];

it still does not make concurrent requests (I thought it might have been caused by dispatching actions to store, but it looks like it doesn't matter).

I'm using Quasar 2.1.6

Answer 1

I think your requests are in fact running in parallel. You could test that by logging Date.now() in the beginning of both your fetchAll() actions.

The reason you are seeing a 6-second delay between the 'Started' and 'Done' messages is because you are logging "Done" in the then() callback of Promise.allSettled() , which gets fired only after all the promises return something.

Here is the relevant excerpt from MDN about Promise.allSettled() :

A pending Promise that will be asynchronously fulfilled once every promise in the specified collection of promises has completed[...]