再次调用 onSearch 时取消上一个承诺.all

Question

我有一个反应组件，它具有自动完成功能，当用户输入超过 3 个字符时调用 onSearch。

一旦发生这种情况，就会调用 Util 文件 (Requests.js) 中的一个函数，并返回一个 axios 承诺，其中包含从这 3 个字符中搜索的数据。

有时我需要根据过滤需求多次调用此函数，因此我需要循环多次并创建 axios 承诺数组。

然后我承诺所有它并在自动完成中显示结果。

我的问题是，如果用户输入"tes"，则该过程开始可能需要一段时间才能完成，具体取决于他们的搜索词(这很好)。 如果他们然后键入添加"t"(在去抖动窗口之后)并使搜索词"test"启动另一个进程，但其同步并等待"tes"进程完成，然后再开始，完成和显示。

显然，第一次调用onSearch时，它需要启动，但是如果调用了任何后续的onSearch，我该如何取消之前的Promise.all？

Answer 1

这是可观察流的一个主要用例，但为了保持简单，这里有一个想法。

每当执行搜索时，请递增计数器并保存开始搜索时计数器所在的值。搜索完成后，检查计数器是否更改;如果是这样，则该搜索不再有效。

React 中的(未经测试)示例(因为您的问题被标记为这样)：

class MyComponent extends React.Component {
state = { items: [] }
searchCounter = 1
constructor() {
super(...arguments)
this.debouncedSearch = debounce(this.search.bind(this), 500)
}
search(e) {
const countBefore = ++this.searchCounter
return axios.get('<url>', { params: { term: e.target.value} }).then(r => {
// Another search happened before the response was done; cancel.
if (countBefore !== this.searchCounter) {
return
}
this.setState({ items: r.data })
})
}
render() {
return (
<div>
<input type="text" onKeyUp={this.debouncedSearch.bind(this)} />
<ul>
{this.state.items.map(item => (
<li key={item.key}>{item.value}</li>
))}
</ul>
</div>
)
}
}