Vue.js / Vuex + axios发送多个PUT请求

时间:2018-10-02 13:25:34

标签: javascript vue.js axios single-page-application vuex

我的SPA上的用户能够添加/更新和删除组。

我已经设置了Vuex存储和API帮助程序模块。在EditGroup组件中,当用户按下“保存更改”时,将执行一个方法。

问题是,axios发送5至20个PUT请求,但是该方法仅执行一次。对于GET,POST或DELETE请求,axios发送一个请求。

在我的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的屏幕截图: Networklog from Firefox

axios错误的屏幕截图: axios Error

更新1(15.10.2018)

这是我的.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 个答案:

答案 0 :(得分:0)

问题:Axios不喜欢在放置请求后被重定向:)

解决方案(温度):请勿重定向...

解决方案:我将在Github上的Axios问题跟踪器中创建一个问题。 >>> https://github.com/axios/axios/issues/1829