React AgGrid无法显示固定时长加载提示的正确实现方案

核心思路 #

要实现「无论API响应快慢，加载提示至少显示4秒」，关键是让API请求完成和4秒定时器结束两个条件同时满足后，才关闭加载状态。不能单独依赖其中一个，否则会出现API响应过快提前关闭加载，或定时器结束但API未返回的状态不同步问题。

具体实现步骤 #

1. 用React状态管理加载状态
   放弃直接通过gridAPI操作加载遮罩，改用组件state控制，符合React数据流逻辑，避免状态不一致。
2. 组合API请求与定时器的Promise
   将API请求和4秒定时器都包装为Promise，通过Promise.all等待两者都完成后，再更新状态关闭加载。
3. 配置AgGrid加载遮罩
   利用AgGrid自带的overlayLoadingTemplate自定义加载提示，通过状态控制遮罩的显示/隐藏。

代码示例 #

import { useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const ItemGrid = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [rowData, setRowData] = useState([]);
  const [gridApi, setGridApi] = useState(null);

  // 实际API请求函数
  const fetchGridData = async (itemType) => {
    const res = await fetch(`/api/items?type=${itemType}`);
    return res.json();
  };

  // 包装4秒定时器为Promise
  const waitMinLoadingTime = () => {
    return new Promise(resolve => setTimeout(resolve, 4000));
  };

  const onItemTypeChange = useCallback(async (selectedType) => {
    // 开启加载状态
    setIsLoading(true);

    try {
      // 同时发起API请求并等待4秒，两者都完成才继续
      const [fetchedData] = await Promise.all([
        fetchGridData(selectedType),
        waitMinLoadingTime()
      ]);
      // 更新表格数据
      setRowData(fetchedData);
    } catch (err) {
      console.error('数据加载失败:', err);
      // 可添加错误提示逻辑
    } finally {
      // 关闭加载状态
      setIsLoading(false);
    }
  }, []);

  const onGridReady = useCallback((params) => {
    setGridApi(params.api);
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 600, width: '100%' }}>
      {/* 切换选择框 */}
      <select onChange={(e) => onItemTypeChange(e.target.value)}>
        <option value="all">全部类型</option>
        <option value="electronics">电子产品</option>
        <option value="clothing">服饰</option>
      </select>

      <AgGridReact
        rowData={rowData}
        columnDefs={[
          { field: 'id' },
          { field: 'name' },
          { field: 'price' }
        ]}
        onGridReady={onGridReady}
        // 自定义加载提示模板
        overlayLoadingTemplate='<div style="padding:24px; text-align:center;">加载中，请稍候...</div>'
        // 通过状态控制加载遮罩显示
        suppressLoadingOverlay={!isLoading}
        overlayNoRowsTemplate=''
      />
    </div>
  );
};

export default ItemGrid;

关键细节说明 #

• Promise.all的作用：它会等待所有传入的Promise完成后才继续执行，确保加载提示至少显示4秒，无论API响应速度快慢。
• suppressLoadingOverlay属性：AgGrid的该属性用于控制是否隐藏加载遮罩，!isLoading表示当isLoading为true时，显示加载遮罩。
• 错误处理：通过try/catch捕获API请求错误，即使请求失败，4秒后也会关闭加载状态，避免加载遮罩一直显示。

旧方案失效原因 #

如果之前是直接调用gridAPI显示加载，API完成后立即关闭，同时单独开启定时器，会出现两种问题：

• API响应快于4秒时，会提前关闭加载，达不到最小显示时长要求；
• 定时器和API请求的关闭逻辑无关联，易出现状态不同步（比如定时器到了但API还没返回，或API返回后定时器重复关闭）。

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