JavaScript嵌套fetch异步函数内average变量外部访问未定义问题求助

核心问题原因 #

• 变量作用域问题：你的average变量是在regionsla函数内部的response.json().then()回调里定义的，作用域仅在该回调函数内部，外部代码无法访问。同时你没有给average加let/const声明，只有回调执行完成后才会临时挂载到全局，请求未完成时访问自然会报未定义。
• 异步执行逻辑问题：fetch是异步API，你调用regionsla之后代码不会等待请求完成、SLA计算结束再往下走，会直接执行averageAmerica = average这行逻辑，此时请求还没返回，average还没有被创建。

修正后代码 #

因为你已经定义了async入口函数，直接用async/await改写异步逻辑即可，比回调写法更清晰易懂：

1. 改造SLA计算函数 #

// 改造为async函数，直接返回当前区域的名称和平均SLA
async function regionsla(serviceids, regionName) {
  const response = await fetch('api.php', {
    // 保留你原本的请求参数配置
  });
  const data = await response.json();
  let i = 0;
  let sum = 0;
  for (const label in data.result) {
    sum += data.result[label].sla[0].sla;
    i++;
  }
  const average = sum / i;
  return {
    region: regionName,
    avgSla: average
  }
}

2. 改造入口主函数 #

async function get_sla() {
  // 建立区域id和名称的映射，减少冗余switch代码
  const regionMap = {
    58: 'America',
    59: 'Australia',
    60: 'Asia',
    61: 'Europe'
  };
  const slaResultList = [];

  for (const regionid of [58,59,60,61]) {
    // 等待获取serviceid的请求完成
    const idResponse = await fetch('api.php', {
      // 保留你原本的请求参数配置
    });
    const idData = await idResponse.json();
    // 提取当前区域的所有serviceid
    const serviceids = idData.result.map(item => item.serviceid);
    // 等待当前区域的平均SLA计算完成
    const regionSla = await regionsla(serviceids, regionMap[regionid]);
    slaResultList.push(regionSla);
  }

  // 直接生成你需要的两个数组，用于图表渲染
  const regionLabels = slaResultList.map(item => item.region);
  const slaValues = slaResultList.map(item => item.avgSla);
  // 此处调用你的图表渲染方法，传入上面两个数组即可
  console.log('区域数组：', regionLabels);
  console.log('平均SLA数组：', slaValues);
}

注意事项 #

• 所有异步请求前都需要加await关键字，才会等待请求完成再执行后续逻辑
• 所有变量建议加const/let声明，避免意外生成全局变量导致逻辑混乱
• 可以用try/catch包裹请求逻辑，处理接口报错的异常场景，避免代码直接崩溃

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