两次独立$.getJSON调用计算返回NaN，如何排查修复？

嘿，你遇到的NaN问题其实是两个常见的API调用小坑导致的，咱们一步步捋清楚：

1. Fixer.io的汇率取值路径错误 #

你直接写data2["GBP"]是拿不到英镑汇率的！Fixer.io的latest接口返回的结构里，所有汇率都嵌套在rates对象里，简化后的返回格式大概是这样：

{
  "base": "USD",
  "date": "2024-05-20",
  "rates": {
    "GBP": 0.7912,
    // 其他货币汇率...
  }
}

所以正确的取值应该是data2.rates.GBP或者data2["rates"]["GBP"]，你之前的写法拿到的是undefined，任何值和undefined相乘都会得到NaN。

2. CoinMarketCap返回的价格是字符串类型，未转成数字 #

CoinMarketCap返回的price_usd是字符串格式（比如"2.85"），字符串和数字/字符串相乘时，JS会尝试类型转换，但如果转换失败就会生成NaN。所以必须先把这个价格转成数字类型再进行计算。

修正后的完整代码 #

$.getJSON("https://api.coinmarketcap.com/v1/ticker/raiblocks/", function(data) {
  // 把字符串价格转成数字，同时校验有效性
  const raiPrice = parseFloat(data[0]["price_usd"]);
  if (isNaN(raiPrice)) {
    console.error("未获取到有效的RaiBlocks美元价格");
    loader(false);
    return;
  }

  $.getJSON("https://api.fixer.io/latest?base=USD", function(data2) {
    // 正确获取英镑汇率，用可选链避免rates不存在的情况
    const gbpRate = data2.rates?.GBP;
    if (isNaN(gbpRate)) {
      console.error("未获取到有效的英镑汇率");
      loader(false);
      return;
    }

    change['rai-usd-cmc'] = raiPrice * gbpRate;
    // 直接计算后格式化，减少重复DOM操作
    $(".change-rai-usd-cmc").text(change['rai-usd-cmc'].toFixed(2));
    loader(false);
    updateData();
  })
  // 给第二个请求添加失败回调
  .fail(function() {
    console.error("汇率接口请求失败");
    loader(false);
  });
})
// 给第一个请求添加失败回调
.fail(function() {
  console.error("RaiBlocks价格接口请求失败");
  loader(false);
});

额外优化建议 #

• 添加请求失败处理：代码里新增的.fail()回调，能避免API请求失败时页面一直卡在加载状态，还能在控制台看到错误原因。
• 提前校验数值有效性：计算前检查价格和汇率是否为有效数字，避免NaN污染后续逻辑。
• 减少DOM操作：你之前连续调用了两次.text()，现在合并成一次，减少不必要的DOM交互，提升性能。

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