如何对两个Web API查询返回的数值求和并在页面展示？

代码类型确认 #

你写的是客户端前端混合脚本，结合了原生JavaScript（包含fetch API这类原生异步请求方法、基础函数逻辑）和jQuery库（用来简化DOM操作、事件绑定等工作），运行在浏览器环境中，属于前端开发范畴，核心作用是和后端Web API交互、更新页面UI。

求和功能实现方案 #

你之前用reduce失败是因为reduce主要用于数组的迭代求和，而你是要处理两个独立的异步获取数值，直接相加更合适。下面是具体实现思路和代码示例：

核心思路 #

1. 用变量存储两个部件的数值，初始值设为null标记未获取
2. 每次调用接口获取到数值后，更新对应变量并触发求和函数
3. 求和函数先校验两个数值都已成功获取且为有效数字，再计算总和并更新到页面指定元素

完整代码示例 #

// 存储两个部件的数量，初始标记为未获取
let qtyPartA = null;
let qtyPartB = null;

// 获取Qty_Part_A的函数
function fetchQuantityA() {
  fetch('/api/your-qty-a-url') // 替换为实际API地址
    .then(res => res.json())
    .then(data => {
      // 把API返回的数值转成数字类型，避免字符串拼接
      qtyPartA = Number(data.Qty_Part_A);
      // 展示单个数值到页面（示例选择器，替换成你实际的元素）
      $('#qty-a-show').text(qtyPartA);
      // 获取到值后触发求和
      sumAmounts();
    })
    .catch(err => console.error('获取部件A数量失败:', err));
}

// 获取Qty_Part_B的函数
function fetchQuantityB() {
  fetch('/api/your-qty-b-url') // 替换为实际API地址
    .then(res => res.json())
    .then(data => {
      qtyPartB = Number(data.Qty_Part_B);
      $('#qty-b-show').text(qtyPartB);
      sumAmounts();
    })
    .catch(err => console.error('获取部件B数量失败:', err));
}

// 求和并展示的函数
function sumAmounts() {
  // 校验两个数值都已获取且为有效数字
  if (typeof qtyPartA === 'number' && typeof qtyPartB === 'number') {
    const total = qtyPartA + qtyPartB;
    // 更新到页面指定元素（替换成你需要展示总和的元素选择器）
    $('#total-amount').text(total);
  }
}

// 单选框切换事件绑定（用jQuery）
$('input[name="part-radio"]').on('change', function() {
  const val = $(this).val();
  if (val === 'partA') {
    fetchQuantityA();
  } else if (val === 'partB') {
    fetchQuantityB();
  }
});

关键注意点 #

• 异步处理：因为fetch是异步操作，不能直接在调用函数后立刻求和，必须等接口返回数据后再触发计算
• 类型转换：API返回的数值大概率是字符串类型，必须用Number()或parseInt()转成数字，否则会出现字符串拼接（比如"2"+"3"得到"23"而非5）
• 校验判断：求和前一定要确认两个数值都已成功获取，避免出现NaN的情况

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