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.
.then
un.catch
que es la parte de la promesa que se ejecutará si esta queda en estado derejected