Vue.js / Vuex + axios가 여러 PUT 요청을 전송함

Vue.js / Vuex + axios가 여러 PUT 요청을 전송함

SPA의 사용자는 그룹을 추가/업데이트 및 삭제할 수 있습니다.

저는 Vuex 스토어와 API 도우미 모듈을 설정했습니다.EditGroup 구성 요소에서 사용자가 "변경 사항 저장"을 누르면 메서드가 실행됩니다.

문제는 axios가 5~20개의 PUT 요청을 전송하지만 메서드는 한 번만 실행된다는 것입니다.GET, POST 또는 DELETE 요청 공리는 하나의 요청을 보냅니다.

내 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의 코드입니다.

    [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는 Put 요청 후 리디렉션되는 것을 좋아하지 않습니다 :)

솔루션(온도):리디렉션 안 함...

솔루션:Github에 있는 Axios의 이슈 추적기에 이슈를 만들겠습니다.>>> https://github.com/axios/axios/issues/1829

언급URL : https://stackoverflow.com/questions/52609326/vue-js-vuex-axios-sends-multiple-put-request