javascript 如何让API调用只在“onclick”时运行，而不是在页面加载时运行？

zd287kbt 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(127)

我有这个API调用函数在这里，我只限于每小时10调用，但每次我在浏览器中加载我的网页调用的功能。我只希望它运行时，点击一个按钮。任何想法？

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

fetch('https://anime-quotes1.p.rapidapi.com/api/quotes/anime?title=tokyo%20ghoul', kaneki)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

JavaScript

来源：https://stackoverflow.com/questions/75402242/how-do-i-make-an-api-call-only-run-onclick-instead-of-whenever-the-page-loads

2条答案

按热度按时间

vecaoik11#

正如@preston17所指出的，您可以在html文件（或者实际上是任何元素）中创建一个按钮，并向其应用一个单击侦听器。
你可以拥有这样的东西
超文本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test App</title>
  </head>
  <body>
    <button id="btn-fetch"> Fetch Data </button>

   ....

  </body>
</html>

然后可以在JS文件中创建对它的引用并添加侦听器

const fetchBtn = document.querySelector("#btn-fetch");
fetchBtn.addEventListener("click",  function(){
const kaneki = {
method: 'GET',
headers: {
    'X-RapidAPI-Key': '6e3e7feab5mshcb53d970957352dp1303bejsnf471bf3638d9',
    'X-RapidAPI-Host': 'anime-quotes1.p.rapidapi.com'
}
};

fetch('https://anime-quotes1.p.rapidapi.com/api/quotes/anime?title=tokyo%20ghoul', kaneki)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
});

应该可以了。祝你学习之旅一切顺利：）

赞(0）回复(0）举报 2023-02-11

rjee0c152#

1.添加按钮。

<button id="button-id">Click</button>

1.使用addEventListener侦听单击事件。

document.getElementById("button-id").addEventListener("click", e => {
    fetch('URL').then(...);
});

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 如何让API调用只在“onclick”时运行，而不是在页面加载时运行？

2条答案

相关问题

热门标签

最新问答