如何在Fetch请求中计算数据平均值？API表格添加平均mass显示

嘿，我来帮你搞定这个问题！咱们一步步来：首先要处理Fetch请求里的批量人物数据，计算出平均mass，最后把结果用<p>标签展示出来。结合你给出的代码，我整理了完整的实现方案：

1. 补全缺失的辅助函数 #

你代码里用到了constructElement但没给出实现，先补上这个创建DOM元素的工具函数：

function constructElement(tag, text) {
  const elem = document.createElement(tag);
  elem.textContent = text;
  return elem;
}

2. 批量获取所有人物数据 #

因为你调用的物种API返回的people字段是一个个人物的URL，不是直接的人物信息，所以我们需要批量请求这些URL来拿到所有人物的mass数据：

const url = 'https://swapi.co/api/species/1/';

function fetchData(url) {
  return fetch(url)
    .then((resp) => {
      if (!resp.ok) throw new Error('请求失败啦');
      return resp.json();
    });
}

// 批量获取物种下所有人的详细数据
async function fetchAllPeople(speciesUrl) {
  const speciesData = await fetchData(speciesUrl);
  // 把每个人物的URL转换成fetch请求的Promise，用Promise.all等待全部完成
  const peoplePromises = speciesData.people.map(personUrl => fetchData(personUrl));
  return Promise.all(peoplePromises);
}

3. 完善表格行构建函数 #

把你未写完的constructTableRow补全，确保能正确生成包含mass的表格行：

function constructTableRow(data) {
  const row = document.createElement('tr');
  const { name, height, mass, hair_color } = data;
  row.appendChild(constructElement('td', name));
  row.appendChild(constructElement('td', height));
  row.appendChild(constructElement('td', mass));
  row.appendChild(constructElement('td', hair_color));
  return row;
}

4. 计算平均mass的函数 #

注意SWAPI里有些人物的mass是"unknown"，得先过滤掉这些无效值，再计算平均值：

function calculateAverageMass(peopleData) {
  // 过滤掉无效的mass值，转换成数字类型
  const validMasses = peopleData
    .map(person => person.mass)
    .filter(mass => mass !== 'unknown' && mass.trim() !== '')
    .map(mass => parseFloat(mass));
  
  // 处理没有有效数据的情况
  if (validMasses.length === 0) return '暂无有效mass数据';
  
  // 计算总和并求平均，保留两位小数
  const totalMass = validMasses.reduce((sum, mass) => sum + mass, 0);
  return (totalMass / validMasses.length).toFixed(2);
}

5. 渲染平均值的函数 #

创建<p>标签，把计算好的平均值添加到页面上（这里默认加到body里，你可以改成加到表格附近的容器）：

function renderAverageMass(average) {
  const averagePara = document.createElement('p');
  averagePara.textContent = `平均质量: ${average} kg`;
  document.body.appendChild(averagePara);
}

6. 主入口函数，串联所有流程 #

用async/await来处理异步流程，同时捕获错误避免页面崩溃：

async function init() {
  try {
    // 1. 获取所有人物数据
    const peopleData = await fetchAllPeople(url);
    
    // 2. 渲染表格
    const table = document.createElement('table');
    // 先加表头
    const headerRow = document.createElement('tr');
    headerRow.appendChild(constructElement('th', '姓名'));
    headerRow.appendChild(constructElement('th', '身高'));
    headerRow.appendChild(constructElement('th', '质量'));
    headerRow.appendChild(constructElement('th', '发色'));
    table.appendChild(headerRow);
    
    // 再加每一行数据
    peopleData.forEach(person => {
      table.appendChild(constructTableRow(person));
    });
    document.body.appendChild(table);
    
    // 3. 计算并渲染平均值
    const averageMass = calculateAverageMass(peopleData);
    renderAverageMass(averageMass);
  } catch (error) {
    console.error('数据加载出错:', error);
    const errorPara = document.createElement('p');
    errorPara.textContent = `加载失败: ${error.message}`;
    document.body.appendChild(errorPara);
  }
}

// 启动整个流程
init();

关键点说明 #

• 用Promise.all()批量处理多个Fetch请求，比逐个请求效率更高；
• 必须过滤"unknown"的mass值，否则计算会出错；
• 加入错误捕获，即使API请求失败也不会导致整个页面挂掉；

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