0

en resumen, estoy creando una web, y quiero que una funcion espere a otra, para despues ejecutarse, mi intento fue poner una detras de la otra, tal que asi:

function newd(d) {
   fetch(d)
     .then(response => response.json())
     .then(data => {
       return data;
     })
   }
   function userd(d) {
     fetch(d)
       .then(response => response.json())
       .then(data => {
         return data;
       })
     }
     
   
     //funciones siclicas
   user = userd("https://tolls.vanessateam.repl.co/store%20games/luiggi%20user.json")
   noticias = newd("https://tolls.vanessateam.repl.co/store%20games/store%20notices.json")
   console.log(user)
   console.log(noticias)

pero en la consola, solo aparese undefined alguna idea?

2
  • 1
    Mírate la documentación de async/await a ver si te sirve
    – masterguru
    Commented el 23 oct. 2022 a las 14:36
  • Las llamadas mediante fetch (y en general toda llamada http) son asíncronas. Esto quiere decir que el código que ellas ejecutan será procesado cuando el resultado de la llamada se reciba. Mientras ello ocurre, son puestas en un lugar llamado cola de eventos. Es por ello que primero se ejecutará el código síncrono (las líneas de console.log) y posteriormente se ejecutará el código asíncrono (el que tienes en cada método then). Te recomiendo que leas muy bien cómo funciona la asincronía en Javascript, ya que es una parte esencial. Saludos Commented el 23 oct. 2022 a las 14:38

2 respuestas 2

0

Te recomiendo leer sobre programacion asincrona en Javascript, Promesas y Async Await. Aunque tus funciones son asincronas las mostras de forma sincrona por lo que no esperan a la respuesta del servidor para mostrar los resultados, por lo que muestra undefined. Aca una version mia de las funciones (aunque en esencia son la misma funcion con nombre distinto, por lo que podrias usar la misma para las 2 solicitudes:

function newd(d) {
  return new Promise((resolve,reject)=>{ // la funcion devuelve una promesa
    fetch(d)
      .then(response => response.json())
      .then(data => resolve(data)) // si obtenemos la data devolvemos una promesa resuelta
      .catch(err => reject(err)) // en caso contrario devolvemos una promesa rechazada
  })
}
 
function userd(d) { // lo mismo que lo anterior. Es la misma funcion
  return new Promise((resolve,reject)=>{
    fetch(d)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(err => reject(err))
  })
}
    

async function show(){ // usando una funcion asincrona para mostrar los datos:
  let user = await userd("https://tolls.vanessateam.repl.co/store%20games/luiggi%20user.json")
  // await fuerza a la variable "user" a esperar los resultados de la funcion,
  // y no pasa a la linea siguiente de codigo hasta que no obtiene los resultados o el error si lo hubiese
  let noticias = await newd("https://tolls.vanessateam.repl.co/store%20games/store%20notices.json")
  // lo mismo aqui, hasta no recibir la promesa no continua con el flujo
  console.log(user) // ahora no mostraran undefined
  console.log(noticias)
}
  
show() // llamamos a la funcion que muestra los datos

Para usar la sintaxis Async/Await las funciones que usamos deben devolver Promesas. Es un tema extenso dificil de abordar por aqui, te recomiendo leer la documentacion de developer.mozilla.org: documentacion

0

El problema era que el console.log() se ejecutaba antes que las llamadas fetch(), esto ya es un tema de asincronía, lo que procedí a hacer es imprimir los resultados dentro de tu función:

function userd(d) {
  fetch(d)
    .then(response => response.json())
    .then(json => console.log(json));
}

En donde en la misma función retornas la respuesta en el formato JSON y lo imprimes en pantalla junto con la llamada del fetch():

function newd(d) {
  fetch(d)
    .then(response => response.json())
    .then(json => console.log(json));
}

function userd(d) {
  fetch(d)
    .then(response => response.json())
    .then(json => console.log(json));
}

//funciones siclicas
user = userd(
  'https://tolls.vanessateam.repl.co/store%20games/luiggi%20user.json'
);
noticias = newd(
  'https://tolls.vanessateam.repl.co/store%20games/store%20notices.json'
);

2
  • perfecto!, tengo una duda, como podria ejecutar codigo justo despues de que la funcion userd termine de ejecutarse Commented el 23 oct. 2022 a las 14:50
  • Como te comento, esto sería un tema de asincronía, tendrías que usar asýnc await, mira su documentación. Commented el 23 oct. 2022 a las 15:11

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.