在vuex商店使用axios请求的Vuejs不能生成多个请求，为什么
问题说明
我正在用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'：'持票人{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.
对某些人来说可能是显而易见的，但我无法发现什么事情，因为我还是一个很不错的菜鸟......
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尝试了一些东西，但无济于事...更多细节：服务文件与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 config更多地玩了一下并设法让它工作（最后！）。
我刚刚创建了我的商店使用的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
};
希望能帮助别人！
这篇好文章是转载于：学新通技术网
