Javascript API FETCH с прослушивателем событий CLICK: TypeError: NetworkError при попытке получить ресурс

Я хочу нажать кнопку, чтобы отобразить данные API с помощью JavaScript Fetch, но у меня возникают проблемы с TypeError: NetworkError при попытке получить ресурс.

Я думаю, что это связано с формой HTML. Если кто-то может помочь мне с этим. Я пытаюсь получить данные из API НАСА.

Код JS ниже

var search = document.getElementById("search");
 search.addEventListener("click",function(){
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if (response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.info(data);
   }).catch(function(error){
       console.info(error);
   });
 });

Ниже представлена HTML-форма

<form>
 <input type = "date" id = "startdate" placeholder = "enter a start date"><br>
<input type = "date" id = "enddate" placeholder = "enter a start date"><br>
<button type = "submit" id = "search">Search</button>
</form>

Спасибо

вы пробовали с их ключом API? URL-адрес, который вы разместили, недействителен

— 20.12.2020 12:52

javascript html addeventlistener fetch-api

20.12.2020 12:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 069

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте это, я добавил event.preventDefault() это предотвратит обновление страницы. Также не забудьте использовать правильный ключ API, предоставленный поставщиком услуг.

 var search = document.getElementById("search");
 search.addEventListener("click",function(event){
 event.preventDefault();
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if (response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.info(data);
   }).catch(function(error){
       console.info(error);
   });
 });

Код не работает, я получаю ошибку скрипта. Fetch должен работать с await вместо then(). Вам нужно async во втором аргументе слушателя перед анонимной функцией.

— 31.05.2022 17:55

Этот URL с demo_key работает: api.nasa.gov/planetary/apod?api_key=DEMO_KEY

— 01.06.2022 09:26

20.12.2020 13:11

Вам не нужны параметры для вашего запроса на выборку, Также нужно запретить перезагрузку страницы

Вот полный рабочий пример

var search = document.getElementById("search");
search.addEventListener("click", function(e) {
  e.preventDefault();
  fetch("https://api.nasa.gov/planetary/apod?api_key=key_obtained_from_nasa")
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
      throw new Error();
    }).then(result => console.info(result))
    .catch(function(response) {
      console.info('Error! Please try again');
    });
})

<form>
  <input type = "date" id = "startdate" placeholder = "enter a start date"><br>
  <input type = "date" id = "enddate" placeholder = "enter a start date"><br>
  <button type = "submit" id = "search">Search</button>
</form>

Спасибо брат. Сейчас работает.. Я намеренно не показывал ключ API

— 21.12.2020 01:57

20.12.2020 13:14