多并行请求下同一错误仅显示一次的实现方案咨询

针对页面初始化时并行发起多个请求，权限错误导致重复弹出提示的问题，以下是几种不破坏请求异步性、同时保证后续操作错误能正常提示的实现方案：

方案1：错误提示函数加防抖+类型判断 #

通过维护最近触发的错误信息，对相同类型的权限错误做短时间防抖，避免重复弹窗，过了防抖时间后再次触发的错误会正常显示。

// 记录最近一次权限错误的触发时间
let lastAuthErrorTime = 0;
// 防抖窗口，可根据需求调整（比如1000ms）
const DEBOUNCE_WINDOW = 1000;

const notifyError = (err) => {
  const isAuthError = err.response?.status === 403;
  
  // 非权限错误直接弹出提示
  if (!isAuthError) {
    toast.error(err.message);
    return;
  }

  const now = Date.now();
  // 若距离上次权限错误提示未超过防抖窗口，跳过本次提示
  if (now - lastAuthErrorTime < DEBOUNCE_WINDOW) {
    return;
  }

  lastAuthErrorTime = now;
  toast.error('权限不足，请重新登录');
};

方案2：axios拦截器集中处理+带过期的全局标记 #

将错误处理逻辑移到axios响应拦截器中，用全局标记控制权限错误的显示，同时设置定时器自动重置标记，确保后续操作触发的错误能正常弹出。

let isAuthErrorShown = false;
let authErrorResetTimer;

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    const isAuthError = error.response?.status === 403;
    
    if (isAuthError) {
      if (!isAuthErrorShown) {
        isAuthErrorShown = true;
        toast.error('权限不足，请重新登录');
        // 1秒后重置标记，允许后续错误提示
        authErrorResetTimer = setTimeout(() => {
          isAuthErrorShown = false;
        }, 1000);
      }
    } else {
      // 非权限错误正常提示
      toast.error(error.message);
    }
    
    return Promise.reject(error);
  }
);

// 组件中清理定时器，避免内存泄漏
const Component = () => {
  useEffect(() => {
    dispatch(api1Action());
    dispatch(api2Action());
    dispatch(api3Action());

    return () => {
      clearTimeout(authErrorResetTimer);
    };
  }, []);

  return <ToastContainer />;
};

方案3：基于请求批次的精准去重 #

如果仅需对页面初始化的这批并行请求去重，可以给请求添加批次ID，通过批次标记控制仅显示一次权限错误，请求完成后清除标记不影响后续操作。

// 存储各批次的错误标记
const batchErrorTracker = new Map();

// 修改API调用，传入批次ID（可放在headers或params，不影响后端逻辑即可）
const api1 = (batchId) => instance.get("api/api1", { headers: { 'X-Batch-Id': batchId } });
const api2 = (batchId) => instance.get("api/api2", { headers: { 'X-Batch-Id': batchId } });
const api3 = (batchId) => instance.get("api/api3", { headers: { 'X-Batch-Id': batchId } });

const api1Action = (batchId) => 
  api1(batchId)
    .then(res => console.log(res))
    .catch(err => notifyError(err, batchId));

const notifyError = (err, batchId) => {
  const isAuthError = err.response?.status === 403;
  
  if (!isAuthError) {
    toast.error(err.message);
    return;
  }

  // 若当前批次已提示过权限错误，跳过
  if (batchId && batchErrorTracker.has(batchId)) {
    return;
  }

  if (batchId) {
    batchErrorTracker.set(batchId, true);
  }
  
  toast.error('权限不足，请重新登录');
};

const Component = () => {
  useEffect(() => {
    const initBatchId = `page-init-${Date.now()}`;
    // 用Promise.all包裹请求，完成后清除批次标记
    Promise.all([
      dispatch(api1Action(initBatchId)),
      dispatch(api2Action(initBatchId)),
      dispatch(api3Action(initBatchId))
    ]).finally(() => {
      batchErrorTracker.delete(initBatchId);
    });
  }, []);

  return <ToastContainer />;
};

方案对比 #

• 方案1：通用型强，无需修改请求逻辑，适合所有场景的重复错误去重。
• 方案2：拦截器集中处理，业务代码侵入性低，需注意定时器清理避免内存泄漏。
• 方案3：精准控制特定批次请求，不影响其他请求的错误提示，但需要修改请求传递批次ID。

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