My fetch requests are being canceled and i don't know why

Question

I am creating a web app that consumes the https://restcountries.eu/ API.

When a user types a country, I'll make a request to the API using fetch. However, my requests always get canceled.

I tested the part which captures user input, but I think the problem is with my fetch code.

var countryName; // This will receive the user input on a textbox in my HTML file.
var resultado;

function grabCountry(urlendpoint, countryName, endpointfields) {

  countryName = document.getElementById('searchInput').value;

  var urlendpoint = 'https://restcountries.eu/rest/v2/name/';    
  var endpointfields = '?fields=topLevelDomain;alpha3Code;callingCodes;altSpellings;subregion;population;latlng;languages;flag';

fetch(urlendpoint + countryName + endpointfields)
 .then(response => data)
 .then(data => {
   console.log(data())
})
}

Answer 1

One of the reasons for cancelled fetch calls can be that the HTML tag that triggers the event is a child (or grandchild) of an HTML Form tag. In that case the event might trigger the form which will start submitting the form data, thus it will naturally cancel your fetch call.

One of the solutions is to call preventDefault function on the event that triggers the fetch call. See example below:

function myFetchFunction(event) {
  event.preventDefault();
  fetch("https://my-url-here");
}

<button onclick="myFetchFunction">Fetch</button>