Question

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

获取错误... SyntaxError：无法执行＆＃39; setRequestHeader＆＃39; on＆＃39; XMLHttpRequest＆＃39;：＆＃39; Bearer {the_entire_content_of_the_previous_api_response}＆＃39;不是有效的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顺利进行。

对某些人来说，这可能是显而易见的，但我无法发现这件事情，因为我仍然是一个非常卑鄙的人......

哦，如果有兴趣的话，我就像这样处理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回答之后，它似乎与＃34;传统＆＃34;调用，但不是提取文件调用。我用Echo api尝试了一些东西，但无济于事......更多细节：Serving files with Echo (Golang)。

任何想法，非常好吗？：）

Answer 1

你的代码看起来非常正确，我认为你的问题来自API。
你应该尝试另一个，只是为了确保：）

Answer 2

好吧，用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
};

希望能帮助别人！

在vuex商店中有axios请求的Vuejs：不能发出多个请求，为什么？

2 个答案: