如何让API调用仅在按钮点击时执行而非页面加载时自动运行？

核心思路就是把API调用逻辑从页面加载时自动执行，改成绑定到按钮点击事件触发，同时可以加一些防护逻辑避免浪费API额度。

具体实现步骤： #

1. 封装API调用为独立函数
   把原本直接执行的fetch代码放进一个函数里，这样可以在需要的时候手动调用：

const kaneki = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '<api_key>',
    'X-RapidAPI-Host': 'anime-quotes1.p.rapidapi.com'
  }
};

// 封装成可调用的函数
function fetchAnimeQuotes() {
  fetch('blah', kaneki)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));
}

2. 添加按钮并绑定点击事件
   在HTML中添加触发按钮，再用JavaScript给按钮绑定点击事件，触发上面的API调用函数：

<!-- HTML部分 -->
<button id="getQuotesBtn">获取动漫语录</button>

// JavaScript部分，确保DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('getQuotesBtn');
  btn.addEventListener('click', fetchAnimeQuotes);
});

额外优化建议（避免浪费API额度） #

因为API有每小时10次的调用限制，建议加上防重复点击逻辑，避免短时间内多次触发消耗额度：

function fetchAnimeQuotes() {
  const btn = document.getElementById('getQuotesBtn');
  // 点击后立即禁用按钮，防止重复触发
  btn.disabled = true;
  btn.textContent = '加载中...';

  fetch('blah', kaneki)
    .then(response => response.json())
    .then(response => {
      console.log(response);
      // 请求完成后恢复按钮状态
      btn.disabled = false;
      btn.textContent = '获取动漫语录';
    })
    .catch(err => {
      console.error(err);
      // 出错时也恢复按钮状态
      btn.disabled = false;
      btn.textContent = '获取动漫语录';
    });
}

这样只有用户主动点击按钮时才会调用API，不会在页面加载时自动消耗额度，同时防重复点击的逻辑能避免误操作浪费调用次数。

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