Question

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

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

偶尔我需要根据过滤需要多次调用此函数，所以我需要多次循环并创建一个axios promises数组。

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

我的问题是，如果用户输入＆＃34; tes＆＃34;该过程开始可能需要一段时间才能完成，具体取决于他们的搜索条件（这很好）。如果他们然后键入添加＆＃34; t＆＃34; （在去抖窗口之后）并进行搜索术语＆＃34;测试＆＃34;另一个过程开始但它同步并等待直到＆＃34; tes＆＃34;过程在开始，完成和显示之前完成。

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

Answer 1

这是Observable Streams的主要用例，但为了保持简单，这是一个想法。

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

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>
    )
  }
}

取消之前的promise.all再次调用onSearch时

1 个答案: