1

No se donde está el problema. Al poner el fetch en una FUNCION me arroja el error TypeError: NetworkError when attempting to fetch resource pero si lo pongo por fuera se ejecuta correctamente. ¿porque sucede esto? ¿Qué estoy haciendo mal?

Dejo el código para que vean el problema. Gracias!

let buttonSearch;
let inputPokemon;
let namePokemon;

//Este codigo funciona...
fetch(`https://pokeapi.co/api/v2/pokemon/pikachu`)
    .then((response) => response.json())
    .then((pokemon) => {
        console.log(pokemon.name);
    })
    .catch((error) => {
        console.log(error)
    })


function reload() {
    document.getElementById('searchPokemon').addEventListener('click', searchPokemon);
    inputPokemon = document.querySelector('form .input-pokemon').value.toLowerCase();
    namePokemon = document.querySelector('.name-pokemon');
}

function searchPokemon() {
    reload();
    console.log(inputPokemon);
    //Este codigo dentro de una funcion NO FUNCIONA
    fetch(`https://pokeapi.co/api/v2/pokemon/pikachu`)
        .then((response) => response.json())
        .then((pokemon) => {
            console.log(pokemon.name);
        })
        .catch((error) => {
            console.log(error)
        })
}

reload();

El objetivo FINAL es que cuando se presione #searchPokemon me traiga por FETCH el JSON de ese pokemon. Para este ejemplo y para que me entiendan he puesto directamente PIKACHU para que vean el error que me arroja cuando esta dentro de una funcion, por fuera funciona correctamente.

gracias!

2 respuestas 2

0

Al menos en el ejemplo tienes una recursividad. En la función reload llamas a la función searchPokemon y en esta última llamas a función reload, lo que hace que se cree un loop infinito por lo que pudiera ser ese el problema.

0

Ya pude resolver el problema. Al no estar el e.preventDefault(); el form se enviaba y recargaba. Por lo cual el fetch no llegaba a realizarse y era lo que generaba el error. Dejo la respuesta por si a alguien le sirve.

2
  • de que forma haces alusión? deberías colocar todo tu código ya que respondiste que te faltaba algo en tu forma pero en la pregunta no existe un form
    – vicasas
    Commented el 9 sept. 2019 a las 19:19
  • @vicasas agrega la siguiente linea de código handler de tu onClick o onSubmit: if (e && "preventDefault" in e) e.preventDefault() siendo e el primer argumento de tu handler. Para los que utilizan typescript, pueden usar la siguiente interfaz: React.SyntheticEvent. @ZeR0ByTe deberías marcas esta respuesta como la correcta. Commented el 7 oct. 2021 a las 14:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.