React中如何避免同一接口多请求返回乱序，确保数据为最新请求结果？

你遇到的是典型的请求竞态问题——旧请求晚于新请求返回，导致新请求的结果被覆盖。下面给你两种实用的解决思路：

方法一：用AbortController取消旧请求 #

这是最直接的方案，利用浏览器原生API在新请求触发时取消未完成的旧请求，从根源上避免旧请求返回干扰结果。

修改后的代码示例：

function handleRequest() {
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    getTableData(signal);

    // useEffect清理函数：组件卸载或依赖变化时取消旧请求
    return () => controller.abort();
  }, [mainContext?.tableFilterContext])

  async function getTableData(signal) {
    mainContext?.setTableData(prev => ({
      ...prev,
      tableLoading: true
    }))
    
    try {
      // 将signal传递给请求方法，让请求支持取消
      let data = await handleTableDataRequest(mainContext?.tableFilterContext, signal);
      
      // 仅当请求未被取消时更新状态
      if (!signal.aborted) {
        mainContext?.setTableData({
          tableData: data,
          tableLoading: false
        })
      }
    } catch (error) {
      // 捕获取消请求的错误，避免控制台报错
      if (error.name !== 'AbortError') {
        mainContext?.setTableData(prev => ({
          ...prev,
          tableLoading: false
        }))
        // 这里可以添加其他错误处理逻辑
      }
    }
  }
}

注意：需要确保handleTableDataRequest内部支持接收signal参数，并传递给实际的请求工具（比如fetch的第二个参数中加入signal，或axios的新版signal配置）。

方法二：用请求标识判断是否为最新请求 #

如果不想修改请求方法的封装，可以在组件内维护请求标识，每次触发请求时记录当前的tableFilterContext快照，请求返回时对比上下文，只有匹配时才更新状态。

修改后的代码示例：

function handleRequest() {
  useEffect(() => {
    // 保存当前请求的filter快照
    const currentFilter = mainContext?.tableFilterContext;
    getTableData(currentFilter);
  }, [mainContext?.tableFilterContext])

  async function getTableData(targetFilter) {
    mainContext?.setTableData(prev => ({
      ...prev,
      tableLoading: true
    }))
    
    let data = await handleTableDataRequest(targetFilter);

    // 对比当前filter与请求时的filter，一致才更新状态
    if (mainContext?.tableFilterContext === targetFilter) {
      mainContext?.setTableData({
        tableData: data,
        tableLoading: false
      })
    }
    // 若不一致，说明已有新请求触发，直接忽略当前结果
  }
}

这种方法的前提是：tableFilterContext作为引用类型时，每次更新都会生成新的引用（比如通过useState更新时返回新对象）；如果是值类型（字符串、数字等），直接对比值即可。

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