Javascript API FETCH With CLICK Event Listener: TypeError: NetworkError when attempting to fetch resource

Question

我想单击一个按钮以使用 JavaScript Fetch 显示 API 数据，但在尝试获取资源时我遇到了 TypeError: NetworkError 的问题。

我认为这与 HTML 形式有关。如果有人可以帮助我。我正在尝试从 NASA APIs.

获取数据

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.log(data);
   }).catch(function(error){
       console.log(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>

谢谢

Answer 1

试试这个，我已经添加了 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.log(data);
   }).catch(function(error){
       console.log(error);
   });
 });

Answer 2

您的提取请求不需要选项，您还需要防止页面重新加载

这是一个完整的工作示例

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.log(result))
    .catch(function(response) {
      console.log('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>

Javascript API FETCH With CLICK Event Listener: TypeError: NetworkError when attempting to fetch resource

Javascript API FETCH With CLICK Event Listener: TypeError: NetworkError when attempting to fetch resource

html

javascript

addeventlistener

fetch-api