Fixer API货币转换代码排查：10 EUR转AUD无法正常输出

我写了一套JS和HTML代码，想通过Fixer API把10 EUR转换成AUD并在console输出结果，参考了官方的GET/convert接口文档，但代码跑不起来，麻烦帮我看看哪里错了？

我的JS代码：

function myFunction() {
    var myHeaders = new Headers();
    myHeaders.append("apikey", "myApi");
    var requestOptions = {
        method: 'GET',
        redirect: 'follow',
        headers: myHeaders
    };

    fetch("https://api.apilayer.com/currency_data/convert?to=AUD&from=EUR&amount=10", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}

我的HTML代码：

<div class="container">
    <h1>Currency Converter</h1>
    <form id="form" onsubmit="myFunction()">
        <div class="form-group">
            <label for="From">From Currency</label>
            <input class="form-control" id="from" required type="text" value="EUR" />
        </div>
        <div class="form-group">
            <label for="To">To Currency</label>
            <input class="form-control" id="to" required type="text" value="AUD" />
        </div>
        <div class="form-group">
            <input class="form-control" id="amount" required type="number" value="10" />
        </div>
        <input type="submit">
    </form>
</div>

官方示例代码：

var myHeaders = new Headers();
myHeaders.append("apikey", "set7MJ58G82xHoRWGW69o7pqn6DqVJQL");

var requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers: myHeaders
};

fetch("https://api.apilayer.com/fixer/convert?to={to}&from={from}&amount={amount}", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

问题出在这几个地方： #

1. API请求路径错误：你用的是/currency_data/convert，但官方接口路径是/fixer/convert，路径写错了，API自然找不到对应的接口。
2. 表单提交会刷新页面：点击submit按钮后，浏览器默认会刷新页面，导致fetch请求还没完成就被中断了，根本看不到结果。
3. 参数硬编码，没关联表单输入：你JS里的请求参数是固定死的，就算代码正常运行，也只能转固定的10 EUR到AUD，没法用用户在表单里输入的数值和货币类型。
4. API密钥是占位符：代码里的"myApi"只是占位符，得换成你自己在apilayer上获取的有效密钥，不然接口会拒绝你的请求。

修正后的完整代码： #

HTML部分（仅修改onsubmit传参）：

<div class="container">
    <h1>Currency Converter</h1>
    <form id="form" onsubmit="myFunction(event)">
        <div class="form-group">
            <label for="From">From Currency</label>
            <input class="form-control" id="from" required type="text" value="EUR" />
        </div>
        <div class="form-group">
            <label for="To">To Currency</label>
            <input class="form-control" id="to" required type="text" value="AUD" />
        </div>
        <div class="form-group">
            <input class="form-control" id="amount" required type="number" value="10" />
        </div>
        <input type="submit">
    </form>
</div>

JS部分：

function myFunction(event) {
    // 阻止表单默认提交刷新行为
    event.preventDefault();
    
    // 获取表单输入的值
    const from = document.getElementById('from').value;
    const to = document.getElementById('to').value;
    const amount = document.getElementById('amount').value;
    
    var myHeaders = new Headers();
    // 替换成你自己的有效API密钥
    myHeaders.append("apikey", "你的真实API密钥");
    
    var requestOptions = {
        method: 'GET',
        redirect: 'follow',
        headers: myHeaders
    };

    // 修正API路径，并用表单值拼接参数
    fetch(`https://api.apilayer.com/fixer/convert?to=${to}&from=${from}&amount=${amount}`, requestOptions)
        .then(response => {
            // 先检查响应状态，排除HTTP错误
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text();
        })
        .then(result => console.log(result))
        .catch(error => console.log('请求出错:', error));
}

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