问题
The user on my SPA is able to add/update and delete groups.
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".
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.
In my EditGroup component:
saveSelected : function () {
this.$store.dispatch(ACTION_PUT_GROUP, {
data : this.selected
});
},
In my Vuex store:
[actionTypes.ACTION_PUT_GROUP]({ commit }, payload) {
api.methods.group.put(payload.data, commit, mutationTypes.EMPTY_MUTATION);
},
In my API helper module:
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);
},
// ...
}
}
}
Screenshot from Firefox:
Screenshot of the axios Error:
Update 1 (15.10.2018)
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 });
}
回答1:
Issue: Axios don't like to get redirected after a Put reqeust :)
Solution (temp): Don't redirect...
Solution: I'll create an issue in the issue tracker of Axios on Github. >>> https://github.com/axios/axios/issues/1829
来源:https://stackoverflow.com/questions/52609326/vue-js-vuex-axios-sends-multiple-put-request