Vuejs 在 vuex 商店中带有 axios 请求:不能发出多个请求，为什么? [英] Vuejs with axios request in vuex store: can't make more than one request, why?

问题描述

我正在使用 vuex 和 axios 构建一些 vuejs 仪表板，并且我一直在为一个非常讨厌的问题而苦苦挣扎:似乎我只能提出一个请求！所有后续调用都失败并显示此错误:

I'm building some vuejs dashboard with vuex and axios, between others, and I've been struggling for a while on a pretty pesky problem: it seems I can't make more than one request! All subsequent calls fail with this error:

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

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.

我的商店看起来像这样:

My store looks like that:

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 一切似乎都可以顺利进行.

I don't think my API has any problem, as everything seems to work smoothly via Postman.

也许对某些人来说这很明显，但我无法发现有什么问题，因为我仍然是一个 vue 菜鸟......

Maybe it's obvious for some, but I can't spot what's the matter as I'm still quite a vue noob...

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

Oh, and I'm handling the axios Promise like this, if this is of any interest:

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使用 Echo (Golang).

After @wajisan answer, it does seem to work with "traditional" calls, but not with fetching file calls. I've tried stuff with my Echo api, to no avail... More details there: Serving files with Echo (Golang).

任何想法，漂亮吗?:)

Any ideas, pretty please? :)

推荐答案

好吧，对 axios 配置进行了更多的尝试并设法使其工作(终于！).我刚刚创建了一个我的商店使用的 axios 实例，奇怪的标题问题就消失了！我不确定为什么，但似乎是因为在我的调用之间默认 axios 配置中发生了一些事情......

Well, played a bit more with axios config and manage to make it work (finally!). I just created a axios instance used by my store, and the weird header problem thingy disappeared! I'm not exactly sure why, but seems to be because of some things going on in the default axios config between my calls...

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

Even if not much has changed, the new store code:

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

希望能帮到人！

这篇关于Vuejs 在 vuex 商店中带有 axios 请求:不能发出多个请求，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！