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
fetch
(y en general toda llamadahttp
) 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 deconsole.log
) y posteriormente se ejecutará el código asíncrono (el que tienes en cada métodothen
). Te recomiendo que leas muy bien cómo funciona la asincronía en Javascript, ya que es una parte esencial. Saludos