取消之前的承诺

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();

然后再次提取。

Read on