使用Fetch API获取外汇汇率后显示undefined的问题求助

核心错误原因 #

你对API返回的结构理解有误：

• 你在displayData函数里把参数命名为rates，但实际fetch返回的是完整的响应对象（包含success、base、rates等顶级字段），不是直接的汇率对象。
• 你试图访问rates.EUR，但EUR汇率实际嵌套在响应对象的rates属性里，正确路径是response.rates.EUR。

修改后的JavaScript代码 #

var EURUSD = document.querySelector("#EURUSD");
let url = 'https://api.exchangeratesapi.io/v1';

function params(paramsObj) {
    return new URLSearchParams({
      access_key: '<added my unique API key here',
      ...paramsObj
    });
}

function getLatest(options) {
  fetch(`${url}/latest?${params(options)}`)
    .then(res => res.json())
    .then(displayData);

    // 修改参数名为response，明确这是完整响应对象
    function displayData(response) {
        console.log(response);
        // 先检查rates和EUR字段是否存在，避免潜在报错
        if (response.rates && response.rates.EUR) {
            // 正确访问USD兑EUR的汇率
            EURUSD.innerText = `1 USD = ${response.rates.EUR} EUR`;
        } else {
            EURUSD.innerText = "无法获取EUR汇率数据";
        }
    }
}

getLatest({base: 'USD'});

额外说明 #

从你控制台的返回数据来看，base设为USD时，response.rates.EUR的值就是1美元兑换欧元的汇率，这样显示更直观。如果需要欧元兑美元的汇率，可以把base改成EUR，然后取response.rates.USD。

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