ArcoDesign组件全局网络请求进度条控制：从原理到最佳实践

1次阅读

没有评论

共计 2768 个字符，预计需要花费 7 分钟才能阅读完成。

在复杂的前端应用中，全局网络请求进度条的实现常常面临几个典型问题：

微前端架构下的状态隔离：子应用独立运行时可能重复注册拦截器，导致进度事件多次触发
SSR 场景的 hydration 冲突：服务端已完成的请求在客户端重新触发进度条动画
多 Tab 竞态问题：浏览器后台 Tab 的长时间请求返回后，错误更新前台进度状态

传统解决方案往往简单地在每个请求开始时显示进度条，结束时隐藏，这种粗暴的方式会导致：

高频请求时进度条频繁闪烁
并发请求时进度突然从 20% 跳到 100%
异常请求中断后进度条僵死

我们采用三层控制模型：

拦截器层：改造 axios 实例，添加请求 / 响应拦截
状态机层：管理当前所有活动的请求状态
视图层 ：通过 ArcoDesign 的GlobalLoading 组件渲染进度

// 创建增强型 axios 实例
const createEnhancedAxios = () => {const instance = axios.create();

  // 请求拦截器
  instance.interceptors.request.use(config => {const requestId = generateRequestId(config);
    store.dispatch(addRequest({ 
      id: requestId,
      weight: calculateRequestWeight(config),
      startedAt: Date.now()}));
    return {...config, meta: { requestId} };
  });

  // 响应拦截器
  instance.interceptors.response.use(
    response => {store.dispatch(completeRequest(response.config.meta.requestId));
      return response;
    },
    error => {if (axios.isCancel(error)) {store.dispatch(cancelRequest(error.config.meta.requestId));
      } else {store.dispatch(failRequest(error.config.meta.requestId));
      }
      return Promise.reject(error);
    }
  );

  return instance;
};

采用权重分配算法处理不同类型请求：

静态资源请求：权重 0.3
API 接口请求：权重 0.7
大文件上传：权重 1.0

// 状态机核心逻辑
const progressReducer = (state, action) => {switch (action.type) {
    case 'ADD_REQUEST':
      return {
        ...state,
        activeRequests: [...state.activeRequests, action.payload],
        totalWeight: state.totalWeight + action.payload.weight
      };

    case 'COMPLETE_REQUEST':
      return updateProgress(state, action.payload, 'completed');

    // 其他 action 处理...
  }
};

// 进度计算公式
const calculateProgress = (state) => {
  const completedWeight = state.completedRequests
    .reduce((sum, r) => sum + r.weight, 0);

  return Math.min(completedWeight / state.totalWeight * 100, 99); // 保留 1% 给页面渲染
};

超时中断：通过 AbortController 取消请求并回滚进度
错误降级：当连续 3 个请求失败时自动隐藏进度条
重试机制：对 5xx 错误自动重试并保持进度连续

interface ProgressState {
  visible: boolean;
  percent: number;
}

const ProgressProvider: React.FC = ({children}) => {const [state, setState] = useState<ProgressState>({
    visible: false,
    percent: 0
  });

  // 使用 useContext 订阅 store 变化
  const storeState = useStore(selector);

  useEffect(() => {const { activeRequests, progress} = storeState;

    setState({
      visible: activeRequests.length > 0,
      percent: progress
    });
  }, [storeState]);

  return (
    <>
      <GlobalLoading 
        loading={state.visible}
        percent={state.percent}
        aria-busy={state.visible}
      />
      {children}
    </>
  );
};