Vuejs 在 vuex 商店中使用 axios 请求：不能发出多个请求，为什么？答案

【问题标题】：Vuejs with axios request in vuex store: can't make more than one request, why?Vuejs 在 vuex 商店中使用 axios 请求：不能发出多个请求，为什么？
【发布时间】：2018-01-14 12:50:13
【问题描述】：

我正在使用 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 菜鸟......

哦，我正在像这样处理 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 尝试了一些东西，但无济于事......更多详细信息：Serving files with Echo (Golang)。

任何想法，漂亮吗？ :)

【问题讨论】：

标签： javascript vuejs2 axios vuex

【解决方案1】：

您的代码似乎非常正确，我认为您的问题来自 API。
您应该尝试另一个，以确保:)

【讨论】：

我刚刚尝试将“/api/xxx”调用替换为对jsonplaceholder.typicode.comaannnd 的一些调用......你是对的。：/它确实工作顺利。也许我对某些 CORS 问题的第一个提示实际上是一个好的提示……我似乎必须启动我的 Echo 服务器。搜索继续！
好！很高兴能帮到你

【解决方案2】：

好吧，用 axios config 玩了更多，并设法让它工作（终于！）。我刚刚创建了一个我的商店使用的 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
};

希望对某人有所帮助！

【讨论】：