title: My fetch requests are being canceled and i don't know why
body: <p>I am creating a web app that consumes the <a href="https://restcountries.eu/" rel="nofollow noreferrer">https://restcountries.eu/</a> API.</p>
  <p>When a user types a country, I'll make a request to the API using <code>fetch</code>. However, my requests always get canceled.</p>
  <p>I tested the part which captures user input, but I think the problem is with my <code>fetch</code> code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 =&gt; data)
   .then(data =&gt; {
     console.log(data())
  })
  }</code></pre>
  </div>
  </div>
  </p>
  <p><img src="https://i.stack.imgur.com/8oOD1.png" alt="IMAGE: I always receive this error in the network" /></p>
  <p><img src="https://i.stack.imgur.com/7HHw4.png" alt="IMAGE: And this error in console" /></p>