仅在上一个XHR完成后如何更新/重新渲染组件？

Question

我正在尝试优化实时搜索组件，主要问题是每次输入更改时都会有很多XHR请求。添加每个字母后-向服务器发送新请求，并且请求需要花费不同的时间才能完成。因此，最新完成的XHR（实际上是第一个XHR，因为它经常返回所有数据）发出渲染组件。 如何仅在最后一个XHR完成时更新组件？

图片示例： 我只需要在2个XHR完成时更新组件，但是现在它在每个XHR完成时更新，并且组件中的最后数据是从1个XHR开始的，因为完成需要更多的时间。

有我的componentDidUpdate方法：

componentDidUpdate(prevProps) {
    if (!isEqual(this.props.userFilterData, prevProps.userFilterData)) {
        const {
            userFilterData,
            initPagination
        } = this.props;
        user
            .find(userFilterData)
            .then(() => initPagination(user.selectors.find(userFilterData)));
    }
}

Answer 1

不是在每次输入更改时都触发搜索请求。您应该debounce进行事件，这样XHR仅在一次pex X毫秒（300-400毫秒）时被触发。为确保仅呈现最后一个XHR请求，您应该取消之前触发的请求。

如果您使用的是axios，则可以按文档cancel进行请求。其他库可能有不同的方法