如何解决汇率网站开发中的"Unexpected token < in JSON at position 0"错误

嘿，我来帮你排查这个问题！你遇到的Unexpected token < in JSON at position 0错误，本质是你用response.json()去解析的内容根本不是JSON格式——通常这种情况是请求返回了HTML（比如API请求失败的错误页面、404页面），所以解析的时候直接报错了。咱们一步步来修复：

1. 先解决最直接的API请求问题 #

你的API base URL前面多了一个空格！这个空格会导致浏览器识别出无效的请求地址，返回错误页面而非预期的JSON数据：

// 错误写法：开头有空格
const base = ' https://freecurrencyapi.net/api/v2/latest';

把空格去掉，修正为：

const base = 'https://freecurrencyapi.net/api/v2/latest';

另外，你代码里的key变量没有定义，要确保你已经把自己的API密钥赋值给这个变量，比如：

const key = '你的实际API密钥'; // 替换成你在freecurrencyapi获取的密钥

2. 修复DOM选择和元素重复的问题 #

• 页面里两个select的ID都是selectCurrency，ID是页面唯一标识，这会导致后续DOM选择逻辑出错。把两个select的ID改成不同的：

<select name="selectCurrency" id="fromCurrency" class="form-select select-currency">
    <option value="Select currency" selected>Select currency</option>
</select>
<select name="selectCurrency" id="toCurrency" class="form-select select-currency">
    <option value="Select currency" selected>Select currency</option>
</select>

• 你的currencyOptions函数里，const select = document.querySelectorAll('option');是错误的，应该获取select元素而非option元素，同时要给每个option设置正确的货币代码值：

const currencyOptions = (data) => {
    const currencies = Object.keys(data);
    // 获取所有货币选择框
    const selects = document.querySelectorAll('.select-currency');
    selects.forEach(selectEl => {
        currencies.forEach(currency => {
            // 给每个选择框添加货币选项，value设为货币代码
            selectEl.insertAdjacentHTML("beforeend", `<option value="${currency}">${currency}</option>`);
        });
    });
}

3. 完善键盘抬起事件的逻辑 #

你现在的keyup事件只是调用了getExchangeRates，但没有处理返回数据，也没有更新输出框。同时要增加校验，避免无效请求：

// 获取两个货币选择框
const fromSelect = document.getElementById('fromCurrency');
const toSelect = document.getElementById('toCurrency');

input.addEventListener('keyup', async () => {
    const fromCurrency = fromSelect.value;
    const toCurrency = toSelect.value;
    const amount = input.value;

    // 校验：未选货币或输入非数字时清空输出
    if (fromCurrency === 'Select currency' || toCurrency === 'Select currency' || isNaN(amount)) {
        output.value = '';
        return;
    }

    try {
        const rates = await getExchangeRates(fromCurrency);
        // 计算并格式化兑换金额
        const exchangeAmount = (amount * rates[toCurrency]).toFixed(2);
        output.value = exchangeAmount;
    } catch (err) {
        console.error('获取汇率失败:', err);
        output.value = '获取失败';
    }
});

4. 额外小优化 #

• 给输入框设置type="number"，限制用户只能输入数字：

<input type="number" name="input" class="input" step="0.01">

• 初始加载货币列表时增加错误捕获，避免页面初始化失败：

try {
    const initialRates = await getExchangeRates('EUR');
    currencyOptions(initialRates);
} catch (err) {
    console.error('初始化货币列表失败:', err);
}

现在这些修改应该能解决你遇到的JSON解析错误，同时让汇率兑换的逻辑正常工作啦！

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