ag-grid数据依赖HTTP请求时偶发无法加载表格问题咨询

问题根因 #

你遇到的偶发渲染失败是异步执行时序不固定导致的，当前代码里有三个互相依赖的异步逻辑没有做顺序控制：

• 货币转换API的请求（异步返回usdrate）
• DOMContentLoaded触发（ag-grid初始化的前提）
• ag-grid内部请求csvjson.json获取表格数据的异步请求
  当ag-grid需要用到usdrate做渲染时，如果货币API还没返回结果，就会因为变量未定义导致渲染逻辑中断。本地运行时网络延迟低，货币API大概率会先返回所以不会触发问题，线上网络波动就会出现偶发失败。

修复方案 #

步骤1：统一异步逻辑的执行顺序 #

保证所有依赖就绪后再初始化ag-grid，用Promise改写逻辑更易维护：

// 改写货币转换请求为Promise形式
function getFxcRate() {
  return new Promise((resolve, reject) => {
    const requestURL = 'https://api.exchangerate.host/latest?base=EUR';
    const httpRequest = new XMLHttpRequest();
    httpRequest.onload = function() { 
      if (httpRequest.status >= 200 && httpRequest.status < 300) {
        const xxhr = JSON.parse(httpRequest.response)
        const usdrate = 1/xxhr.rates.USD
        resolve(usdrate)
      } else {
        reject(new Error('汇率请求失败'))
      }
    };
    httpRequest.onerror = reject
    httpRequest.open('GET', requestURL);
    httpRequest.send();
  })
}

// 监听DOM就绪
function domReady() {
  return new Promise(resolve => {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', resolve)
    } else {
      resolve()
    }
  })
}

// 统一按顺序执行所有依赖逻辑
Promise.all([getFxcRate(), domReady()])
.then(([usdrate]) => {
  // 先保存汇率到gridOptions或者全局可访问的位置，供ag-grid渲染逻辑使用
  gridOptions.usdrate = usdrate
  // 初始化ag-grid
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  // 请求表格数据
  return agGrid.simpleHttpRequest({ url: 'csvjson.json' })
})
.then(data => {
  gridOptions.api.setRowData(data);
  autoSizeAll(false);
})
.catch(err => {
  // 可加异常兜底逻辑，比如用默认汇率、显示错误提示
  console.error('初始化失败', err)
})

步骤2：移除原有分散的逻辑块 #

删掉原来直接调用fxc()的代码，以及原来单独写的DOMContentLoaded监听逻辑，避免重复初始化。

可选优化：加请求超时兜底 #

如果汇率API不稳定，可以加超时逻辑，请求超时后用默认汇率兜底，避免表格完全无法渲染：

// 给汇率请求加3秒超时
function getFxcRateWithTimeout() {
  return Promise.race([
    getFxcRate(),
    new Promise((_, reject) => setTimeout(() => reject(new Error('汇率请求超时')), 3000))
  ]).catch(err => {
    console.warn(err, '使用默认汇率')
    return 0.92 // 替换为你的默认汇率值
  })
}
// 把Promise.all里的getFxcRate替换为getFxcRateWithTimeout即可

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