Javascript 取消先前的承诺

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

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

我读过关于取消令牌的文章，但我不完全确定如何实现它。当搜索组件进行初始调用时，将有一个承诺，该承诺将被挂起，直到收到结果为止。当我再次搜索时，我怎么能忽略第一次承诺的结果？每次搜索时，我是否会将承诺存储在组件的一个字段中，并在将来的搜索中以某种方式检查该字段

我在网上看到了许多可能的解决方案。我正在使用

fetch retry

来处理API调用，不希望使用

bluebird

或

axios

之类的库。我不明白的主要部分是，如果承诺在未来被创造出来，如何让我的承诺不被解决

希望我解释得足够好

谢谢

当我再次搜索时，我怎么能忽略第一次承诺的结果

你可能不想这样，因为如果你做了一个请求而忽略了它的结果，你会浪费一些带宽。相反，您应该取消底层请求（而不是承诺，承诺不能直接取消）

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

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

然后再做一次抓取

---

ES6承诺不可撤销。故事结束了。这是一个可以产生一个可以取消的承诺的东西。Axios提供取消功能。至于费奇，那是个好主意。如果你对得到答案感兴趣，考虑提供关于你的案例的具体信息。请不要试图描述代码，这是行不通的。对于与代码相关的问题是必需的。按照官方文档的建议，一种反应式的做法是创建一个可中止的承诺：以下是浏览器兼容性图表：谢谢，我也读过AbortController，但我认为它在IE11上不可用，而且我所在的受限环境中没有可安装的polyfill。如果我要使用AbortController，我只需要在主组件状态下有一个实例。调用搜索函数时，我将该控制器传递到api函数调用中，并将其附加到fetch中。然后我在搜索函数开始时调用

this.controller.abort（）

？@sam否，您应该将它与管理它的组件绑定（

search

？）