javascript - 如何仅在最后一个 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每个文档的请求。其他库可能有不同的方法