Axios 不执行并发请求

Question

我想通过 Vuex 操作向我的后端发出一些请求。 最好是这些请求可以并行完成，因为它们获取的数据不依赖于其他请求。

为了确保我的请求不会立即返回，我为每个 api 地址添加了 3 秒延迟（服务器端）以模拟长时间运行的操作。

我面临的问题是请求是按顺序完成的，我不太知道如何解决它。 对于两个请求，控制台中的“Started”和“Done”消息之间总是有 6 秒的延迟，而不是大约 3 秒。

我对 Web 开发不是很有经验，所以我的假设很少可能是不正确的，但我已经偶然发现了从 Vuex 操作返回 axios 方法的要求，这也是我所做的。

这是我的页面：

<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>

这是我的 Vuex 操作的实现方式：

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);
    });
}

来自 boot/axios.js 的 Axios 暴露：

import axios from 'axios';

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

Vue.prototype.$axios = axiosInstance;

export { axiosInstance };

即使我会更改dispatch调用并将其替换为这样的 axios 调用：

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];

它仍然没有发出并发请求（我认为这可能是由将操作分派到存储引起的，但看起来无关紧要）。

我正在使用 Quasar 2.1.6

Answer 1

我觉得你的要求其实都是并行运行。 您可以通过在两个fetchAll()操作的开头记录Date.now()来测试。

您在 'Started' 和 'Done' 消息之间看到 6 秒延迟的原因是因为您在Promise.allSettled()的then()回调中记录了“完成”，只有在所有承诺返回后才会触发某物。

以下是MDN关于Promise.allSettled()的相关摘录：

待定的 Promise 将在指定的承诺集合中的每个承诺完成后异步实现[...]