javascript - react 并发 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'

我想这可以通过 promise 来解决？

如果我不够清楚，请告诉我。

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，你应该知道变异是很糟糕的 😊