Question

我正在我的React应用程序中实现搜索输入，根据结果集的大小，服务器可能需要几秒钟的响应时间。我现在遇到的问题是，如果用户搜索具有较大结果集的术语，然后立即搜索具有较小结果集的术语，则第一次搜索将在最后一次搜索之后返回，并覆盖数据，因此在表格上显示错误的结果。

当前，我有一个搜索组件，该组件在其父级中调用异步函数（可以从多个子组件中调用此函数，搜索就是其中之一）。在异步函数内部，我使用搜索查询等待服务。一旦返回，结果将传递到更新某些状态的函数。

我已经阅读了有关取消令牌的信息，但是我不确定如何实现此功能。当搜索组件进行初始调用时，将有一个待定的承诺，直到收到结果为止。当我再次搜索时，如何能够忽略第一个承诺的结果？每次搜索时，我是否都将诺言存储在组件的字段中，并在以后的搜索中以某种方式检查此字段？

我在线阅读了许多可能的解决方案。我正在使用fetch-retry处理API调用，而不希望使用bluebird或axios之类的库。我不了解的主要部分是，如果将来创建了承诺，如何无法解决我的承诺。

希望我对此解释得足够好！

谢谢

Answer 1

当我再次搜索时，如何能够忽略第一个承诺的结果？

您可能不希望这样做，因为如果您提出请求而忽略了请求的结果，则浪费了一些带宽。相反，您应该取消基础请求（不是承诺，不能直接取消承诺）。

为此，您可以为每次搜索保留一个堕胎控制器：

 this.controller = new AbortController();

然后以以下方式启动所有提取请求：

 fetch(url, { signal: this.controller.signal })
   .then(res => res.json())
   .then(res => this.setState({ /*...*/ }))
   .catch(() => /*..*/)

现在，如果您重新开始搜索，请执行以下操作：

 this.controller.abort();
 this.controller = new AbortController();

然后再次进行获取。