在 vuex 存储中使用 axios 请求的 Vuejs：不能发出多个请求，为什么？

Question

我正在使用 vuex 和 axios 等构建一些 vuejs 仪表板，并且我在一个非常讨厌的问题上苦苦挣扎了一段时间：似乎我不能提出多个请求！所有后续调用均因此错误而失败：

Fetching error... SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Bearer {the_entire_content_of_the_previous_api_response}' is not a valid HTTP header field value.

我的店铺是这样的：

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 菜鸟，所以我无法发现问题所在...

哦，我正在这样处理 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 回答后，它似乎确实适用于 "traditional" 调用，但不适用于获取文件调用。我已经用我的 Echo api 尝试了一些东西，但无济于事......更多细节在那里：。

有什么想法吗？ :)

Answer 1

你的代码看起来很正确，我认为你的问题来自 API。
你应该试试另一个，以确保:)

Answer 2

好吧，对 axios 配置进行了更多的尝试并设法让它工作（终于！）。我刚刚创建了一个我的商店使用的 axios 实例，奇怪的 header 问题就消失了！我不确定为什么，但似乎是因为在我的调用之间默认的 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
};

希望对大家有所帮助！

在 vuex 存储中使用 axios 请求的 Vuejs：不能发出多个请求，为什么？

Vuejs with axios request in vuex store: can't make more than one request, why?

javascript

vuejs2

axios

vuex