【发布时间】:2018-09-02 09:44:13
【问题描述】:
我有这个问题 - 在 Vue 组件创建的生命周期挂钩上,我通过 Axios 向外部 Laravel API 发出 2 个 CORS 获取请求。如果我只提出一个请求,一切都很好,并且 100% 的时间都可以正常工作。但是,如果我发出 2 个或更多请求,我有时会在网络选项卡中随机收到失败的请求。显然我在 Axios 上做错了什么。你能帮帮我吗?
这是我的组件创建的钩子 - 我称之为 VueX 动作。
created () {
this.$store.dispatch('getPets');
this.$store.dispatch('getSpecies');
},
这是我在 VueX 商店中的操作
actions: {
getPets(context) {
return new Promise((resolve, reject) => {
axios.get('api/pets')
.then(response => {
context.commit('SET_PETS', response.data);
context.commit('SET_SELECTED_PET', response.data.data[0]);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
getSpecies(context) {
return new Promise((resolve, reject) => {
axios.get('api/species')
.then(response => {
context.commit('SET_SPECIES', response.data);
resolve(response);
})
.catch(error => {
reject(error);
});
});
},
setSelectedPet(context, pet) {
context.commit('SET_SELECTED_PET', pet);
},
}
然后我随机收到失败的请求 - 有时两个请求都正常(200 状态), 其他时候,其中一个失败了…… Requests
请求失败 - 没有响应,我认为请求根本没有转到 Laravel API。 Laravel 日志也是空的。
我认为我在使用 Axios 时做错了,因为它不是来自我的浏览器或防火墙 - 我已经停止了防火墙并在隐身和其他没有任何扩展的浏览器中进行了测试。任何帮助将不胜感激。
这是我在主 js 文件中设置的 Axios 标头。
// Set axios to call the backend API and set its headers on every page reload
window.axios = require('axios');
window.axios.defaults.baseURL = 'http://api.aaa';
window.axios.defaults.timeout = 30000;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer '+getToken(),
};
【问题讨论】:
-
单击该图像上的该错误检查响应,这将提供有关该错误的更多见解。据我所知,laravel api 路由不受 CORS 影响。
-
请求失败 - 没有响应,我认为请求根本没有到达 Laravel API。 Laravel 日志也是空的。
-
会不会是你当时发送的请求太多了?
-
(1) 服务器在哪里运行? (2)您可以尝试在测试方法中同时做出两个响应,远离 vuex 等吗? (例如,在您设置标题的位置)
-
在此期间小问题 - 如果您只是传递错误,则无需编写
catch- pastebin.com/8e0crUZE - 这与您的示例操作完全相同。 或者,如果不使用返回值,pastebin.com/biAgwTEp
标签: javascript laravel-5 vuejs2 axios vuex