循环内意外await警告及addCharts执行完成后入队Promise问题

核心问题拆解 #

1. 「Unexpected await inside a loop」警告：当前代码虽未直接在循环内使用await，但你误解了Promise执行逻辑——addCharts作为异步函数，调用后会立即返回Promise并开始执行，并非等执行完成才push到数组。若要实现顺序执行（前一个addCharts完成后再执行下一个），需调整循环逻辑。
2. SVG未完全生成：大概率是getSVG未确保SVG完全渲染就返回，或多实例并发修改chartTable导致竞态，引发SVG插入异常。

具体解决方案 #

1. 消除警告并实现顺序执行（按需选择） #

若必须等前一个addCharts执行完成再处理下一个，用for...of循环直接await，避免触发警告：

const createChartPanel = async (data) => { 
  let panel = []
  // 先预生成所有迭代的a值，规避浮点数精度问题
  const aValues = [];
  for (let a = 0.0; a < totalMacroFactorCount; a = parseFloat((a + 1).toFixed(1))) {
    aValues.push(a);
  }

  // 顺序执行，每个addCharts完成后再收集结果
  for (const a of aValues) {
    // 这里保留你的业务代码
    await addCharts(/* 传入对应参数 */);
    panel.push(chartPanel);
  }

  return panel;
}  

2. 并发执行但确保结果完整（性能优先） #

若无需顺序执行，优化Promise收集逻辑，让addCharts直接返回所需结果，避免then回调的隐式操作：

const createChartPanel = async (data) => { 
  const promises = []
  const aValues = [];
  for (let a = 0.0; a < totalMacroFactorCount; a = parseFloat((a + 1).toFixed(1))) {
    aValues.push(a);
  }

  for (const a of aValues) {
    // 这里保留你的业务代码
    // 让addCharts执行完成后返回当前chartPanel
    const promise = addCharts(/* 传入对应参数 */).then(() => chartPanel);
    promises.push(promise);
  }
  
  // 等待所有异步操作完成，直接得到完整panel数组
  return await Promise.all(promises);
}  

3. 修复SVG生成不完整问题 #

确保getSVG完全生成SVG后再返回，同时避免chartTable的并发修改冲突：

const addCharts = async (data, chartTable, barColor, orangeBar, maroonBar, darkBlueBar, chartHeight, isFirstRow) => {
  // 这里保留你的数据处理逻辑
  const modifiedData = /* 你的数据转换代码 */;
  const maxHeight = _.maxBy(_.flatten(modifiedData), 'y');

  // 确保所有SVG异步生成完成
  const svgs = await Promise.all(modifiedData.map(async (subArr, index) => {
    // 确认getSVG内部已等待SVG渲染完成再返回
    return getSVG(index % 2, subArr, isStrScore, maxHeight?.y);
  }));

  // 操作chartTable时，先校验目标行存在，避免并发修改导致的异常
  svgs.forEach((svg, nidx) => {
    const targetRow = chartTable[nidx + 1];
    if (targetRow?.table?.body) {
      targetRow.table.body.push([{
        svg: svg, 
        alignment: 'center', 
        border: [false, false, false, true],
        borderColor: '#41ABE0', 
        borderWidth: 0.5,
        width: chartWidth, 
        height: chartHeight, 
        fillColor: (nidx % 2 ? 'white' : '#f2f2f3')
      }]);
    }
  });
};

关键注意事项 #

• 浮点数迭代直接用a += 1易出现精度问题，建议预先生成所有a值的数组。
• 若多个addCharts实例同时修改同一个chartTable，会引发竞态条件，此时必须改为顺序执行，或拆分chartTable为独立模块分别处理。
• 重点检查getSVG函数，确保内部已等待SVG渲染完成（比如DOM操作需等待requestAnimationFrame或相关回调触发）再返回Promise。

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