如何根据下拉菜单选中项动态调整API请求获取的加密货币数据？

核心问题 #

你当前代码的API请求路径中coins/bitcoin为硬编码值，无论选择什么币种都会固定返回比特币的行情数据，这是需要调整的核心点。

实现步骤 #

• 定义变量存储选中的币种ID，注意CoinGecko API要求传入的是币种的唯一slug标识（比如比特币为bitcoin、以太坊为ethereum，不是BTC/ETH这类币种简写）
• 改造原有的getMarketData函数，新增币种ID作为入参，替换路径中的硬编码比特币标识
• 给币种下拉菜单绑定选中变更事件，每次切换币种时调用改造后的接口函数，用返回的新数据更新页面图表、数值等所有相关展示内容

改造后的代码示例 #

接口请求函数

// 新增coinId入参，对应CoinGecko的币种唯一标识
getMarketData = async (coinId, currency) => {
  try {
    const { data } = await axios.get(
      `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=${currency}&days=30&interval=daily`
    );
    // 原有数据处理、渲染逻辑保留即可
    return data;
  } catch (err) {
    // 补充错误处理避免接口异常导致页面崩溃
    console.error('行情数据获取失败：', err);
  }
}

下拉菜单绑定事件示例（原生JS版本）

<!-- 下拉菜单option的value对应CoinGecko的币种ID -->
<select id="coinSelector">
  <option value="bitcoin">比特币 (BTC)</option>
  <option value="ethereum">以太坊 (ETH)</option>
  <option value="binancecoin">币安币 (BNB)</option>
</select>

// 监听下拉框选中变更
document.getElementById('coinSelector').addEventListener('change', async (e) => {
  const selectedCoinId = e.target.value;
  // 计价货币可根据实际需求从对应的选择器动态获取
  const targetCurrency = 'usd';
  // 请求新币种的行情数据
  const newMarketData = await getMarketData(selectedCoinId, targetCurrency);
  // 执行你的页面数据更新逻辑，比如刷新图表、更新价格数值等
  updatePageData(newMarketData);
})

注意事项 #

• 下拉菜单的option value需要和CoinGecko的币种ID完全匹配，你可以提前调用CoinGecko的coins/list接口拿到全量币种ID映射存在本地，用来渲染下拉选项，避免ID不匹配导致接口报错
• 可以添加加载状态，接口请求过程中展示加载动画，避免用户重复操作
• 可以添加请求防抖逻辑，避免用户快速切换币种时频繁发起无效请求

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