Redux Toolkit Query：发送新查询时如何中止/取消/忽略旧查询结果

方案1：使用AbortController主动取消旧请求 #

这是最优方案，既能终止未完成的请求减少后端负载，又能彻底避免旧响应干扰UI。每次发起新请求前，先取消上一次未完成的请求：

let abortController = null;

function handleOptionSelect(option) {
  // 先做乐观更新，即时反馈给用户
  updateLocalState(option);

  // 取消之前未完成的请求
  if (abortController) {
    abortController.abort();
  }

  // 创建新的控制器
  abortController = new AbortController();
  const signal = abortController.signal;

  // 携带signal发起请求
  fetch(`/api/update-option?value=${option}`, { signal })
    .then(res => res.json())
    .then(data => {
      // 确保请求未被取消再同步状态
      if (!signal.aborted) {
        updateLocalState(data.option);
      }
    })
    .catch(err => {
      // 忽略取消请求的错误，只处理真实请求失败
      if (err.name !== 'AbortError') {
        console.error('请求失败:', err);
        // 可选：请求失败时回滚本地状态
        // revertLocalState();
      }
    });
}

方案2：用请求标识符忽略旧响应 #

如果你的环境不支持AbortController（比如旧版浏览器），可以给每个请求分配唯一标识，只处理最新请求的响应：

let latestRequestId = 0;

function handleOptionSelect(option) {
  const currentRequestId = ++latestRequestId;

  // 乐观更新本地状态
  updateLocalState(option);

  fetch(`/api/update-option?value=${option}`)
    .then(res => res.json())
    .then(data => {
      // 仅当当前请求是最新的，才更新状态
      if (currentRequestId === latestRequestId) {
        updateLocalState(data.option);
      }
    })
    .catch(err => {
      // 同样只处理最新请求的错误
      if (currentRequestId === latestRequestId) {
        console.error('请求失败:', err);
        // 可选：回滚状态
        // revertLocalState();
      }
    });
}

方案3：React框架下的针对性处理 #

如果用React开发，可以结合useRef保存请求标识或控制器，同时利用组件卸载时的清理逻辑：

基于请求标识符的实现 #

import { useState, useRef } from 'react';

function OptionSelector() {
  const [selectedOption, setSelectedOption] = useState('1');
  const latestRequestId = useRef(0);

  const handleSelect = (option) => {
    const currentId = ++latestRequestId.current;
    setSelectedOption(option); // 乐观更新

    fetch(`/api/update-option?value=${option}`)
      .then(res => res.json())
      .then(data => {
        if (currentId === latestRequestId.current) {
          setSelectedOption(data.option);
        }
      })
      .catch(err => {
        if (currentId === latestRequestId.current) {
          console.error('请求失败:', err);
          // 可选：请求失败回滚状态
          // setSelectedOption(prev => prev);
        }
      });
  };

  return (
    <div>
      <button onClick={() => handleSelect('1')}>选项1</button>
      <button onClick={() => handleSelect('2')}>选项2</button>
      <button onClick={() => handleSelect('3')}>选项3</button>
      <p>当前选择: {selectedOption}</p>
    </div>
  );
}

基于AbortController的实现 #

import { useState, useRef, useEffect } from 'react';

function OptionSelector() {
  const [selectedOption, setSelectedOption] = useState('1');
  const abortControllerRef = useRef(null);

  const handleSelect = (option) => {
    // 取消旧请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    const controller = new AbortController();
    abortControllerRef.current = controller;

    setSelectedOption(option); // 乐观更新

    fetch(`/api/update-option?value=${option}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        setSelectedOption(data.option);
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error('请求失败:', err);
          // 可选：回滚状态
          // setSelectedOption(prev => prev);
        }
      });
  };

  // 组件卸载时自动取消未完成的请求
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  return (
    <div>
      <button onClick={() => handleSelect('1')}>选项1</button>
      <button onClick={() => handleSelect('2')}>选项2</button>
      <button onClick={() => handleSelect('3')}>选项3</button>
      <p>当前选择: {selectedOption}</p>
    </div>
  );
}

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