货币转换应用fetch API首次加载失效问题求助

看起来你遇到的核心问题是异步操作的执行顺序导致的：填充下拉框的fetch请求是异步的，而你通过body onload调用convertCurrencyRight()时，下拉框的选项可能还没加载完成，甚至转换函数的定义都可能还没就绪（取决于脚本加载顺序）。下面是具体的解决方案：

1. 调整脚本加载顺序，确保转换函数先被定义 #

你的HTML里脚本加载顺序是先加载indexCurrencyFirst.js，再加载包含转换函数的indexCurrency.js。虽然fetch是异步的，但为了避免极端情况下（比如API响应极快）出现函数未定义的错误，建议调换顺序：

<script type="text/javascript" src="indexCurrency.js" ></script>
<script type="text/javascript" src="indexCurrencyFirst.js" ></script>

2. 在下拉框填充完成后触发首次转换 #

把convertCurrencyRight()调用放在填充下拉框的fetch回调末尾，这样能确保只有当下拉框的所有选项都加载并设置好选中状态后，才执行转换逻辑，保证fromCurrency和toCurrency能正确获取值。修改indexCurrencyFirst.js代码如下：

//fill the select options with the available currencies
fetch("https://api.exchangeratesapi.io/latest?base=")
.then((resp) => resp.json())
.then(function(data){
  var allRates = data.rates;
  var selectA = document.getElementById("from");
  var selectB = document.getElementById("to");
  allRates = Object.entries(allRates)
  for(var i = 0; i < allRates.length; i++) {
    var opt = allRates[i][0];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    if(opt==="GBP"){
      var selectedAtt=document.createAttribute("selected");
      el.setAttributeNode(selectedAtt);
    }
    selectA.appendChild(el);
    var la = document.createElement("option");
    la.textContent = opt;
    la.value = opt;
    selectB.appendChild(la);
  }
  // 下拉框完全填充后，执行首次货币转换
  convertCurrencyRight();
})
.catch(function(error) {
  console.log(error);
});

3. 移除不必要的onload事件 #

既然已经在下拉框加载完成后自动触发转换了，就可以删掉body标签上的onload="convertCurrencyRight()"属性，避免重复触发或潜在的执行冲突。

这样修改后，页面首次加载时会按以下顺序执行：

1. 加载并定义convertCurrencyRight()等转换函数
2. 发起请求获取货币列表并填充下拉框
3. 下拉框就绪后自动调用转换函数，拉取汇率数据并完成首次转换

这就和你刷新页面时的正常行为一致了。

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