React实时搜索时旧API调用返回结果覆盖新结果如何解决？

这个问题属于典型的异步请求竞态问题，短关键词的请求发送早、返回晚，就会覆盖后发送的长关键词请求结果。不需要修改边输入边搜索的逻辑，两种常用方案可以解决：

方案1：校验返回结果的查询有效性（改造成本最低） #

不需要修改请求逻辑，仅在请求返回后判断该结果对应的查询是否为当前最新的查询即可：

class MyComponent extends Component {
  // 新增实例变量，记录最新的查询关键词
  latestQuery = '';

  state = {
    items: []
  }
  
  constructor(props) {
    super(props);
    this.myCall = _debounce(this.myCall, 400);
  }
  
  myCall = async e => {
    e.persist();
    const query = _get(e, 'target.value', '');
    // 每次发请求前更新最新查询词标记
    this.latestQuery = query;
  
    try {
      const items = await myAPI(query)
      // 只有返回结果对应的查询词等于当前最新查询词时，才更新状态
      if (query === this.latestQuery) {
        this.setState({ items })
      }
    } catch (error) {
      console.error(error)
    }
  }

  render() {
    return (
      <>
        <input onChange={(e) => this.myCall(e)} />
        {this.state.items.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </>
    );
  }
}

该方案兼容性强，不需要调整现有API调用逻辑，适合快速修复问题。

方案2：用AbortController主动取消旧请求（性能更优） #

如果你的项目只需要兼容现代浏览器，可以在发起新请求时直接取消上一次未完成的请求，从根源上避免旧请求返回，同时减少无效的服务器资源占用：

class MyComponent extends Component {
  // 存储当前请求的取消控制器
  abortController = null;

  state = {
    items: []
  }
  
  constructor(props) {
    super(props);
    this.myCall = _debounce(this.myCall, 400);
  }
  
  myCall = async e => {
    e.persist();
    const query = _get(e, 'target.value', '');
    // 发起新请求前，先取消上一次未完成的请求
    if (this.abortController) {
      this.abortController.abort();
    }
    // 为当前请求新建控制器
    this.abortController = new AbortController();
    const signal = this.abortController.signal;
  
    try {
      // 将signal参数传入你的API请求，底层fetch/axios都支持该配置
      const items = await myAPI(query, signal)
      this.setState({ items })
    } catch (error) {
      // 主动取消请求触发的异常不需要抛出
      if (error.name !== 'AbortError') {
        console.error(error)
      }
    }
  }

  // 组件卸载时取消未完成的请求，避免内存泄漏
  componentWillUnmount() {
    if (this.abortController) {
      this.abortController.abort();
    }
  }

  render() {
    return (
      <>
        <input onChange={(e) => this.myCall(e)} />
        {this.state.items.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </>
    );
  }
}

仅需要对你的myAPI方法做小调整，把接收的signal参数传给底层的请求配置即可：

• 基于fetch实现：fetch(url, { signal })
• 基于axios实现：axios.get(url, { signal })

内容的提问来源于stack exchange，提问作者Thiago Moreira