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

Posted 2023-03-28

【中文标题】Vue.js / Vuex + axios 发送多个 PUT 请求

【英文标题】：Vue.js / Vuex + axios sends multiple PUT Request

【发布时间】：2019-03-07 15:19:30

【问题描述】：

我的 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 的屏幕截图：

axios 错误截图：

更新 1 (15.10.2018)

这是来自我的 .NET Core 控制器的代码

    [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 );
    

【问题讨论】：

状态 302 是重定向。是登录问题吗？

@eric99 不，请求被重定向到 GET-Endpoint

【参考方案1】：

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

解决方案（临时）：不要重定向...

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