如何在JavaScript中实现按钮触发的动态Fetch请求？

我来帮你搞定这个动态请求的问题！核心思路就是让你的DbApi类支持传入动态路径，再通过按钮的点击事件匹配对应的接口地址，具体步骤如下：

1. 修改DbApi类，支持动态路径 #

把原来固定的请求路径改成可传入的参数，同时保留默认值来兼容原有调用逻辑：

class DbApi {
  constructor() { }
  // 新增path参数，默认值设为原来的'/fetchDataAll'
  async getDbData(path = '/fetchDataAll') {
    const dataResponse = await fetch(path)
    const dataJson = await dataResponse.json()
    return dataJson
  }
}

2. 建立按钮标识与请求路径的映射 #

把你原来的fetcherObject改成直接映射按钮标识到对应API路径的对象，逻辑更清晰直观：

// 这里的key要和按钮上的data-fetcher属性值一一对应
const pathMap = {
  all: '/fetchDataAll',
  rookies: '/fetchDataRookies', // 替换成你实际的新秀接口路径
  ufra: '/fetchUrfa' // 替换成你实际的ufra接口路径
};

3. 用事件委托绑定按钮点击事件 #

通过父容器监听所有按钮的点击，不用给每个按钮单独绑定事件，还能支持后续动态添加的按钮：

// 实例化DbApi
const dbApi = new DbApi();
// 获取按钮列表的父容器
const bestBtnContainer = document.querySelector('.jsBestBtnList');

bestBtnContainer.addEventListener('click', async (e) => {
  // 确保点击的是目标按钮（这里假设你的按钮有.jsBestBtn类）
  if (e.target.matches('.jsBestBtn')) {
    // 获取按钮上的data-fetcher属性值
    const fetcherKey = e.target.dataset.fetcher;
    // 从映射表中拿到对应的请求路径
    const targetPath = pathMap[fetcherKey];

    if (targetPath) {
      try {
        // 调用动态路径的请求方法
        const data = await dbApi.getDbData(targetPath);
        // 这里写你拿到数据后的处理逻辑，比如渲染页面
        console.log('请求成功，数据:', data);
      } catch (error) {
        // 处理请求失败的情况
        console.error('请求出错:', error);
      }
    } else {
      console.warn(`找不到与${fetcherKey}对应的API路径`);
    }
  }
});

4. 给按钮添加对应的data属性 #

你的按钮需要配置data-fetcher属性，和映射表的key对应，示例如下：

<div class="jsBestBtnList">
  <button class="jsBestBtn" data-fetcher="all">全部数据</button>
  <button class="jsBestBtn" data-fetcher="rookies">新秀数据</button>
  <button class="jsBestBtn" data-fetcher="ufra">Ufra数据</button>
</div>

这样点击不同按钮时，就会自动切换对应的请求路径啦！

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