反应并发API调用

Question

因此，我当前的代码如下所示：

零件：

requestDescriptions(params, bothGender) {
    if (bothGender) {
        // men request
        params.gender = 'men';
        this.props.getDescriptions(params);
        // women request
        params.gender = 'women';
        this.props.getDescriptions(params);
    } else {
        this.props.getDescriptions(params);
    }
}

我的动作如下所示：

export function getDescriptions(params = { brand: null, category: null, gender: null }) {
return (dispatch) => {
    dispatch(requestDescription());
    return request
        .get(`${getApiUrl()}plp?${QueryString.stringify(params)}`)
        .end((err, res) => {
            if (err && res.statusCode !== 404) {
                ...
            }
            if (res.statusCode === 404) {
                // HERE: 
                console.log(params.gender); 
                return dispatch(receiveEmptyDescription(params));
            }
            return dispatch(receiveDescription(res.body));
        });
};

}

直到现在，我还没有注意到该错误，但是当我开始测试两个API调用都返回404的情况时才发现该错误。

错误是并发调用同一端点会覆盖我的参数。 当API返回200时，我看不到问题。 但是现在当我测试返回404时，我可以清楚地看到问题了。

我遇到的问题就在这里：

this.props.getDescriptions(params);
params.gender = 'women';

如果我检查动作（ //HERE ）内的控制台日志，则在两种情况下， params.gender显示'women'即使第一次是'men'

我猜这可以用承诺解决吗？

让我知道我是否还不够清楚。

Answer 1

问题并不在于您正在发出并行请求，还是在获取HTTP2XX或HTTP4XX。

您总是看到gender等于'women'是，您对两个请求（ 例如 params使用相同的对象实例 。

发生的情况是，您将params.gender设置为第一个请求的'men' ，将params.gender设置为第二个请求的'women' 。

在完成任何请求之前，以上所有步骤都是同步进行的。

这意味着，在任何请求完成之前很长时间， params.gender已经等于'women' 。

只需向每个动作发送不同的对象。

requestDescriptions(params, bothGender) {
    if (bothGender) {
        // men request
        this.props.getDescriptions({ ...params, gender: 'men' });

        // women request
        this.props.getDescriptions({ ...params, gender: 'women' });
    } else {
        this.props.getDescriptions(params);
    }
}

由于您已经在使用Redux，因此应注意突变是baaaad😊