javascript - 取消之前的 promise

Question

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

目前我有一个搜索组件，它在其父组件中调用异步函数(可以从多个子组件调用该函数，搜索就是其中之一)。在异步函数内部，我使用搜索查询对服务进行了等待调用。一旦返回，结果就会传递给更新某些状态的函数。

我读过有关取消 token 的内容，但我不完全确定如何实现这一点。当搜索组件进行初始调用时，将有一个待处理的 promise ，直到收到结果为止。当我再次搜索时，我怎么能忽略第一个 Promise 的结果呢？每次搜索时，我是否会将 promise 存储在组件的字段中，并以某种方式在将来的搜索中检查该字段？

我在网上阅读了许多可能的解决方案。我使用 fetch-retry 来处理 API 调用，并且不想使用 bluebird 或 axios 等库。我不明白的主要部分是，如果将来创建了一个 promise ，如何让我的 promise 无法解决。

希望我解释得足够好!

谢谢

Answer 1

When I search again, how would I be able to ignore the result of the first promise?

您可能不希望这样，因为如果您发出请求并忽略其结果，您就会浪费一些带宽。相反，您应该取消底层请求(不是 promise ， promise 不能直接取消)。

为此，您可以为每次搜索保留一个堕胎 Controller :

 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