0

Ejecuto una función con un boton, esta función lo que hace es ejecutar fetch. Actualmente el codigo de la funcion que se ejecuta es este:

fetch(url)
        .then(function(response) {
            if (response.ok) {
                console.log('LA CONEXION FUE EXITOSA!!!-----');
                logSubida();
            }
            logSubida();
            return response.text();
        })
        .then(function(myJson) {
            document.getElementById('peli720').innerHTML += myJson + "</br>"
            console.log(myJson);
        });

La cosa es que cuando la conexión sea exitosa se ejecute la función logSubida(); pero no he tenido suerte.

ACTUALIZACIÓN #1 el código funciona pero la función logSubida() se ejecuta después que el script termina de ejecutarse completamente.

Hay alguna manera de poder ejecutar dicha función cuando se haga la petición al servidor correctamente?

8
  • Que te devuelve el response?
    – Bicho
    el 15 mar. 2020 a las 17:27
  • Al hacer console.log(response); no me devuelve nada, pero la conexión se establece porque logro ver de manera independiente el log ejecutando la funcion logSubida(); por aparte el 15 mar. 2020 a las 17:31
  • Deberías tener después del .then un .catch que es la parte de la promesa que se ejecutará si esta queda en estado de rejected
    – BetaM
    el 15 mar. 2020 a las 17:33
  • Entiendo, podrías darme un ejemplo por favor. Perdón por mi impertinencia pero apenas estoy aprendiendo javascript el 15 mar. 2020 a las 17:36
  • Prueba a usar response.status para verificar si el servidor te devuelve una respuesta exitosa el 15 mar. 2020 a las 17:40

1 respuesta 1

1

La llamada e fetch es asíncrona, por lo tanto, tienes que crear un código en el cual pases los datos a logSubida una vez fetch haya finalizado.

La forma de hacerlo, en base a la sintaxis de tu código sería:

var btnGo = document.getElementById('btnGo');
var divPeli = document.getElementById('peli720');

btnGo.addEventListener("click", logFetch, false);

function logFetch() {
  var url = this.value;
  fetch(url)
    .then(response => response.json())
    .then(json => {
      /* 
        Puedes también hacer uso de json aquí
        con toda seguridad.
        Para prueba, pondremos el id aquí
      */
      divPeli.innerHTML += json.id + "<br />";
      logSubida(json);
    }).catch(err => {
      console.error('fetch failed', err.message);
    });
}

function logSubida(json) {
  console.log(json);
  divPeli.innerHTML += json.title;
}
<button id="btnGo" value="https://jsonplaceholder.typicode.com/todos/1">Launch Fetch</button>
<div id="peli720">
  <hr />
</div>

También podrías usar las funciones asíncronas (async), que hacen el código un poco más legible, ya que desaparecen todos los callback.

Este código es similar al anterior.

var btnGo = document.getElementById('btnGo');
var divPeli = document.getElementById('peli720');

btnGo.addEventListener("click", logFetch, false);

async function logFetch() {
  try {
    var url = this.value;
    const response = await fetch(url);
    const json = await response.json();
    /* 
      Puedes también hacer uso de json aquí
      con toda seguridad
      Para prueba asignaremos un dato del json
    */
    divPeli.innerHTML += json.id + "<br />";
    logSubida(json);
  } catch (err) {
    console.log('fetch failed', err.message);
  }
}

function logSubida(json) {
  divPeli.innerHTML += json.title + "<br />";
  console.log(json);
}
<button id="btnGo" value="https://jsonplaceholder.typicode.com/todos/1">Launch Fetch</button>
<div id="peli720">
  <hr />
</div>

Cabe decir que por cualquiera de los dos que optes, debes saber que desde dentro del bloque de fetch puedes usar los datos y modificar cualquier elemento del DOM, como de hecho ocurre en el ejemplo al setear el id.

Para más detalles sobre las funciones asíncronas puedes ver Funciones asincrónicas - hacen promesas amigablemente de Jake Archibald.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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