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())
})
}

IMAGE: I always receive this error in the network

IMAGE: And this error in console

user_4336575 · Answer

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");
}

user_559079 · Answer

The code you've provided so far works just fine. You need to examine how you get your data. It should look like this for text or the .json() for parsing json.

fetch('/url')
     .then(response => response.text())
     .then(data => console.log(data));

Here's a demo:

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

function grabCountry() {

  countryName = 'Bulgaria';

  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 => response.json())
 .then(data => console.log(data))
}

grabCountry();

user_6952359 · Answer

Your fetch code has a syntax error near the first then close.

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


}

grabCountry('', '' , '')

user_6742734 · Answer

Please do change the button type from submit to button. Your fetch will work like a charm!

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

4 Answers