React实时搜索功能正常但无法取消历史网络请求问题排查

你已经尝试用axios的CancelToken处理重复请求，但核心问题在于每次输入字符都立刻发起请求——哪怕CancelToken能取消pending的请求，也可能因为网络响应快导致多个请求完成，或者取消逻辑没和输入延迟结合。要实现「输入完整关键词后仅发起一次请求」，我们需要把防抖（Debounce） 和 CancelToken结合起来，双管齐下解决问题。

问题根源 #

你的onChangeHandler在用户每输入一个字符时就立刻调用search方法，CancelToken只能取消还在pending的旧请求，但如果用户输入速度快，还是会有多个请求被发起甚至完成。我们需要让搜索请求延迟触发，直到用户停止输入一段时间（比如300ms），确认用户输入完成后再发起请求，同时用CancelToken兜底取消可能还在pending的旧请求。

解决方案步骤 #

1. 添加防抖函数 #

防抖函数的作用是：当一个函数被频繁调用时，只在最后一次调用的延迟时间后执行。你可以自己实现，或者直接使用lodash的debounce（更稳定可靠）。

2. 重构搜索逻辑，结合防抖与CancelToken #

调整组件中的搜索触发逻辑，用防抖后的函数来调用搜索，同时确保CancelToken正确取消未完成的请求。

修改后的完整代码 #

App.js #

import React, { Component } from 'react';
import { debounce } from 'lodash'; // 先安装lodash: npm install lodash
import { avoidUnnecessarySearch } from './utils';
import './App.css';

class App extends Component {
  state = { movies: null, loading: false, value: '' };

  // 用防抖包装搜索方法，延迟300ms执行，新输入会重置延迟
  debouncedSearch = debounce(async (val) => {
    if (!val.trim()) {
      this.setState({ movies: null, loading: false });
      return;
    }
    this.setState({ loading: true });
    try {
      const res = await avoidUnnecessarySearch(
        `https://api.themoviedb.org/3/search/movie?query=${val}&api_key=aac2c5b048fc2fae15675475f98c6ef7`
      );
      const movies = res?.results || [];
      this.setState({ movies, loading: false });
    } catch (err) {
      this.setState({ loading: false });
      console.error('搜索失败:', err);
    }
  }, 300); // 延迟时间可按需调整，比如200-500ms

  onChangeHandler = (e) => {
    const value = e.target.value;
    this.setState({ value });
    // 调用防抖后的搜索函数
    this.debouncedSearch(value);
  };

  // 组件卸载时取消防抖，避免内存泄漏
  componentWillUnmount() {
    this.debouncedSearch.cancel();
  }

  render() {
    const { loading, movies, value } = this.state;
    return (
      <div>
        <input 
          value={value} 
          onChange={this.onChangeHandler} 
          placeholder="Type something to search" 
        />
        {loading && <p>Loading...</p>}
        {movies && movies.length > 0 && (
          <ul>
            {movies.map(movie => (
              <li key={movie.id}>{movie.title}</li>
            ))}
          </ul>
        )}
      </div>
    )
  }
}

export default App;

Utils.js #

import axios from 'axios';

const makeRequestCreator = () => {
  let cancelTokenSource;

  return async (query) => {
    // 先取消之前未完成的请求
    if (cancelTokenSource) {
      cancelTokenSource.cancel('取消旧请求，发起新请求');
    }

    // 创建新的CancelToken
    cancelTokenSource = axios.CancelToken.source();

    try {
      const res = await axios.get(query, { 
        cancelToken: cancelTokenSource.token 
      });
      return res.data;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('请求已取消:', error.message);
        return null; // 取消请求时不返回结果，等待新请求
      } else {
        console.error('请求出错:', error.message);
        throw error; // 抛出错误让组件处理
      }
    }
  }
}

export const avoidUnnecessarySearch = makeRequestCreator();

关键说明 #

• 防抖函数：用lodash的debounce设置300ms延迟，用户停止输入300ms后才会发起搜索，有效避免输入过程中的重复请求。
• CancelToken兜底：即使防抖没完全生效（比如网络延迟），CancelToken会取消之前pending的请求，确保最终只有最新的请求返回结果。
• 组件卸载清理：在componentWillUnmount中取消防抖，避免组件卸载后防抖函数仍执行造成内存泄漏。
• 空值处理：输入为空时直接清空结果，不发起请求，进一步减少不必要的网络调用。

这样修改后，用户输入"spiderman"的过程中，只有停止输入300ms后才会发起一次搜索请求，中间的输入动作不会触发请求，完美解决你的需求~

内容的提问来源于stack exchange，提问作者arjun sah