Vue.js/Vuex + axios发送多个PUT请求 [英] Vue.js / Vuex + axios sends multiple PUT Request
问题描述
我的SPA上的用户能够添加/更新和删除组.
The user on my SPA is able to add/update and delete groups.
我已经建立了Vuex商店和API帮助程序模块.在EditGroup组件中,当用户按下保存更改"时,将执行一个方法.
I've set up a Vuex store and an API helper module. In the EditGroup component, a method gets executed when the user press "save changes".
问题是,axios发送5至20个PUT请求,但该方法仅执行一次.对于GET,POST或DELETE请求,axios发送一个请求.
The issue is, axios sends 5 to 20 PUT requests but the method gets executed only once. On a GET, POST or DELETE request axios sends one request.
在我的EditGroup组件中:
saveSelected : function () {
this.$store.dispatch(ACTION_PUT_GROUP, {
data : this.selected
});
},
在我的Vuex商店中:
[actionTypes.ACTION_PUT_GROUP]({ commit }, payload) {
api.methods.group.put(payload.data, commit, mutationTypes.EMPTY_MUTATION);
},
在我的API帮助器模块中:
function _sendRequest(url, method, data, commit, commitHandler) {
axios({
method: method,
data: data,
url: url,
responseType: "application/json"
}).then(function (response) {
commit(commitHandler, response.data);
}).catch(function (error) {
_handle();
});
}
// ...
export default {
methods : {
group : {
// ...
put: function (data, commit, commitHandler) {
_sendRequest("api/group/" + data.Id, "put", data, commit, commitHandler);
},
// ...
}
}
}
Firefox的屏幕截图:
axios错误的屏幕截图:
更新1(15.10.2018)
这是我的.NET Core Controller中的代码
This is the code from my .NET Core Controller
[HttpPut("{id}")]
public IActionResult PutGroup(string id, [FromBody] Group group)
{
if (id != group.Id)
return BadRequest();
// Validation ...
context.CreateOrUpdateItem(group);
// ...
return RedirectToAction(nameof(GetGroup), "Group", new { id = id });
}
推荐答案
问题:Axios不喜欢在放置请求后被重定向:)
Issue: Axios don't like to get redirected after a Put reqeust :)
解决方案(温度):请勿重定向...
Solution (temp): Don't redirect...
解决方案:我将在Github上的Axios问题跟踪器中创建一个问题.>>> https://github.com/axios/axios/issues/1829
Solution: I'll create an issue in the issue tracker of Axios on Github. >>> https://github.com/axios/axios/issues/1829
这篇关于Vue.js/Vuex + axios发送多个PUT请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!