Как сделать так, чтобы вызов API выполнялся только «onclick», а не всякий раз, когда загружается страница?

У меня есть эта функция вызова 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.info(response))
.catch(err => console.error(err));

Сделайте кнопку и добавьте прослушиватель кликов.

Unmitigated 09.02.2023 18:24

Теперь, когда вы сделали свой ключ API общедоступным, я предлагаю вам изменить его.

Andy 09.02.2023 18:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  1. Добавьте кнопку.
<button id = "button-id">Click</button>
  1. Используйте addEventListener для прослушивания событий кликов.
document.getElementById("button-id").addEventListener("click", e => {
    fetch('URL').then(...);
});
Ответ принят как подходящий

Как указал @preston17, вы можете создать кнопку в html-файле (или любом другом элементе) и применить к ней прослушиватель кликов.

У вас может быть что-то вроде этого

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.info(response))
.catch(err => console.error(err));
});

Это должно сработать. Всем удачи в обучении :)

Другие вопросы по теме