Pokemon API requst failed with status (canceled)

JavaScript
1

I am trying to setup the Pokemon API locally and having some issues with the API request that I am not sure how to resolve. This is my fetch request:

const fetchPokemon = async (input) => {
  let pokemonRequestURL = pokemonProxyUrl + input;
  try {
    const res = await fetch(pokemonRequestURL.replace("http", "https"));
    const data = await res.json();
    if(data){
      showLatestPokemon(data)
    }
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
  } catch (err) {
    alert('Pokémon not Found')
  }
};

Now I know this code works as I had it setup in Freecodecamp and the request went through fine. No issues at all. However now I am trying to set it up locally I just get the status (canceled) in my network tab. Does not matter if it is a pokemon or not.

I have added the code to VSCode and I am using the Live Server extension to load the page. Also I tried setting up on Github pages but had the same issue.

2

Hello,
Just a quick question: are you using a form in your HTML and are you triggering the fetch request through an event attached to a child of the form element if it exists?
If that is the case, you should cancel the event submit on your form element as it cancels the fetch call?

3

Hi,
Thanks for the response.

Yes it is setup through a form but I already have the default submission stopped.

searchPokemon.addEventListener('click', e => {
  e.preventDefault
  let pokemonInputed = document.getElementById("search-input").value;
  pokemonInputed = sanatiseSearch(pokemonInputed);
  fetchPokemon(pokemonInputed)
})
1 Like
4

from what I see here, preventDefault is not working, remember it is a method not a property so add the ()

3 Likes
5

Que head slap. That was the issue thank you. I spent so long staring at that trying to figure it out.

2 Likes