如何自定义Ag-Grid API请求失败时的ERR错误提示列表？

核心思路 #

先精准捕获API请求的错误类型（HTTP状态码、网络异常等），将错误映射为自定义提示文案，再通过Ag-Grid的自定义渲染逻辑替换默认的ERR列表展示。

具体实现步骤 #

1. 捕获并处理API请求错误

在API请求环节，根据不同错误场景生成对应自定义提示，存入状态供Ag-Grid调用：

// 示例API请求函数（以fetch为例）
const fetchGridData = async () => {
  try {
    const res = await fetch('/your-api-endpoint');
    if (!res.ok) {
      // 根据HTTP状态码匹配自定义提示
      let customMsg;
      switch (res.status) {
        case 403:
          customMsg = "您无权限访问该数据，请联系管理员";
          break;
        case 404:
          customMsg = "请求的数据源不存在，请检查接口地址";
          break;
        case 500:
          customMsg = "服务器繁忙，请稍后重试";
          break;
        default:
          customMsg = "数据加载失败，请刷新页面重试";
      }
      // 将自定义错误存入状态
      setGridErrors([{ id: 1, msg: customMsg }]);
      return;
    }
    // 请求成功则加载正常数据
    const data = await res.json();
    setRowData(data);
    setGridErrors([]);
  } catch (err) {
    // 处理网络异常类错误
    setGridErrors([{ id: 1, msg: "网络连接异常，请检查您的网络设置" }]);
  }
};

2. 配置Ag-Grid渲染自定义错误列表

通过自定义列渲染器或无数据覆盖层，替换默认的ERR展示：

// React环境下的Ag-Grid配置示例
<AgGridReact
  rowData={gridErrors.length > 0 ? gridErrors : rowData}
  columnDefs={[
    gridErrors.length > 0 
      ? {
          headerName: "错误提示",
          field: "msg",
          cellRenderer: (params) => {
            // 自定义错误样式与展示内容
            return `<div style="color: #dc3545; padding: 12px; line-height: 1.5;">${params.value}</div>`;
          },
          flex: 1
        }
      : [
          // 正常数据列配置
          { headerName: "ID", field: "id", flex: 1 },
          { headerName: "名称", field: "name", flex: 2 }
        ]
  ]}
  // 无错误时的空数据提示
  overlayNoRowsTemplate={
    gridErrors.length === 0 
      ? '<div style="padding: 20px; color: #6c757d;">暂无数据</div>' 
      : ""
  }
/>

3. 统一管理错误映射（可选）

如果错误类型较多，可维护一个错误映射表，方便统一修改：

const ERROR_MSG_MAP = {
  403: "您无权限访问该数据，请联系管理员",
  404: "请求的数据源不存在，请检查接口地址",
  500: "服务器繁忙，请稍后重试",
  NETWORK_ERROR: "网络连接异常，请检查您的网络设置",
  API_TIMEOUT: "请求超时，请重新尝试"
};

// 使用时直接匹配
const customMsg = ERROR_MSG_MAP[res.status] || "数据加载失败，请刷新页面重试";

关键注意点 #

• 确保错误捕获覆盖所有场景：HTTP状态码错误、网络异常、请求超时等。
• 自定义渲染时可添加样式区分错误等级（比如警告用黄色、严重错误用红色）。
• 若需展示多条错误，只需将gridErrors设为包含多个提示对象的数组即可。

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