Vue.js / Vuex + axios sends multiple PUT Request

允我心安 提交于 2021-02-10 19:59:15

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!