Question

今天我收到了一些错误报告，说我们的某些应用程序的POST请求正在被复制。

这些请求导致在远程数据库上创建对象，如任务，会议等，因此它们的重复意味着在创建的任务中使用相同的名称，相同的截止日期，用户等。

我试图复制这个，但它似乎是一个随机行为，并且报告的唯一并发症状是请求需要比正常情况更多的时间才能完成。

我目前正在使用堆栈React + Redux + Axios + Asp.Net WebApi，我已达到以下注意事项，以便了解和解决问题。

任何关于这些主题的提示都非常感谢。

根本原因识别

React + Redux ：

在onClick事件上，仅调用一次调度请求的操作创建者。显然，没有状态更改或页面刷新可能导致多次调用此功能。

handleClick(event) {

    var postData = {

        title: this.state.text,
        dueDate: this.state.date,     
        assignedUser: this.state.user.id
    };

    this.props.contentPost(postData);
}

Axios公司：

我怀疑的是，由于某些未知原因，用户＆＃39;请求失败，或者需要很长时间才能完成，然后axios应该再次发送请求。我已经检查了它的文档和问题数据库，并没有发现像自动重试或请求重复这样的内容。

export const contentPost = (props) => {
    return function (dispatch) {
        dispatch({ type: CONTENT_POST_ERROR, payload: null })
        dispatch({ type: CONTENT_POST_LOADING, payload: true });
        dispatch({ type: CONTENT_POST_SUCCESS, payload: null })

        const request = axios({
            method: 'post',
            url: `/api/content`,
            headers: auth.getHttpHeader(),
            validateStatus: function (status) {
                return status >= 200 && status < 300; // default
            },
            data: props
        }).then((res) => {
            dispatch({ type: CONTENT_POST_LOADING, payload: false });
            dispatch({ type: CONTENT_POST_SUCCESS, payload: true, data: res })
        }).catch(err => {
            dispatch({ type: CONTENT_POST_ERROR, payload: err.code })
            dispatch({ type: CONTENT_POST_LOADING, payload: false });
            dispatch({ type: CONTENT_POST_SUCCESS, payload: false, data: null })

        });
    }
};

的WebAPI

Controller的方法没有任何类型的限制或＆＃34;唯一性令牌＆＃34;识别和防止重复的请求。由于这是一种随机行为，我不打赌路由或我的服务器端应用程序的任何部分对此负有任何责任。

迄今为止的解决方案......

Axios公司：

在我的动作创建者处阻止axios请求，以防止在给定的时间间隔内经常调用它。
发送客户端生成的＆＃34;唯一性令牌＆＃34;在请求正文中

的WebAPI

根据给定时间间隔的正文内容，实施请求过滤/限制，以防止重复请求。
接收并处理＆＃34;唯一性令牌＆＃34;防止发表背叛。

即使如上所述，这些解决方案看起来有点矫枉过正，而根本原因似乎也有点过于主观。

Answer 1

我发现用户的延迟加载状态反馈导致了这种行为。

有些人仍在双击网站上的内容。没有通过代码防止这种情况是天真的。

在这种情况下，有很多方法可以实现更好的用户体验。我选择在用户发送POST请求时完全更改按钮，我们也在后端实施限制。

{this.props.content_post_loading &&
    <a className="btn btn-primary disabled">Creating...</a>
    ||
    <a className="btn btn-primary" onClick={this.handleCreateClick}>Create</a>
}

Axios POST请求花费太长时间并在WebApi上重复

根本原因识别

迄今为止的解决方案......

1 个答案: