在vuex商店中使用axios请求的Vuejs:不能生成多个请求,为什么？

Question

我正在用vuex和axios构建一些vuejs仪表板,在其他人之间,我已经在一个非常讨厌的问题上苦苦挣扎了一段时间:似乎我不能发出多个请求!所有后续调用均因此错误而失败:

获取错误... SyntaxError:无法在'XMLHttpRequest'上执行'setRequestHeader':'Bearer {the_entire_content_of_the_previous_api_response}'不是有效的HTTP头字段值.

我的商店看起来像这样:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return axios.get("/api/data1")
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return axios.get("/api/data2")
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

我不认为我的API有任何问题,因为一切似乎通过Postman顺利运行.

也许这对某些人来说是显而易见的,但我无法发现什么事情,因为我仍然是一个相当的vue noob ...

哦,我正在处理像这样的axios Promise,如果有任何兴趣的话:

this.$store.dispatch("api/FETCH_DATA1").then(() =>
{
  // parsing this.$store.state.api.rawData1 with babyparse
}).catch((err) =>
{
  this.errorMsg = "Fetching error... " + err;
});

在@wajisan回答之后,它似乎与"传统"调用一起工作,但不能用于获取文件调用.我用我的Echo api尝试了一些东西,无济于事......更多细节:用Echo(Golang)提供文件.

有什么想法,很高兴吗？:)

Answer 1

好吧，多玩了一下 axios 配置并设法使其工作（终于！）。我刚刚创建了一个我的商店使用的 axios 实例，奇怪的标头问题消失了！我不太清楚为什么，但似乎是因为我的通话之间默认的 axios 配置中发生了一些事情......

即使没有太大变化，新的商店代码：

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const api = axios.create({ // Yep, that's the only thing I needed...
  baseURL: "/api"
});

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return api.get("/data1") // Little change to use the axios instance.
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return api.get("/data2") // And there too. Done. Finished. Peace.
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

export default
{
  namespaced: true,
  state,
  actions,
  mutations
};

希望这会对某人有所帮助！