Tengo la siguiente función. ¿Por qué recibo Promise { <state>: "pending" } cuando llamo a GetProfile("username") ? ¿Qué tengo que hacer?
const GetProfile = async (username) => { await fetch(`${host}/api/v1/getprofile/${username}`).then((resp) => { console.log(resp.json()); }); };resp.json() devuelve una Promise y eso es lo que está registrando en la consola. Debería resolverse antes de obtener los datos reales. Como está en una función async , puede hacer lo siguiente. Tenga en cuenta que no es necesario tener este bloque then tiene.
const GetProfile = async (username) => { const res = await fetch(`${host}/api/v1/getprofile/${username}`); const data = await res.json(); return data; }); };Ese es el comportamiento normal de la función async en javascript, devuelven promesas.
En React, puede mantener el valor en un estado.
const [profile,setProfile]=useState(null) useEffect(()=> { const GetProfile = async (username) => { const profile = await fetch(`${host}/api/v1/getprofile/${username}`).then(resp => resp.json()); setProfile(profile)} GetProfile(username); },[username])Porque está usando .then después de su llamada asíncrona, y resp.json() también devuelve una Promise que no está siendo devuelta por su llamada .then() .
Lo que sucede en tu caso es:
const response = await fetch(`${host}/api/v1/getprofile/${username}`) return response.json(); Y debido a que la función json() es una Promesa en sí misma (que no está en await ), la lectura de la llamada json() es la Promesa 'Pendiente' que está recibiendo.
Entonces, para resolver esto, intente:
await fetch(`${host}/api/v1/getprofile/${username}`).then((resp) => resp.json())o
const response = await fetch(`${host}/api/v1/getprofile/${username}`) return await response.json();