Ayuda con JavaScript asíncrono: ¿Cómo devuelvo el valor de un fetch?

Climbing

Estoy empezando con async/await y no entiendo una cosa. Tengo una función que hace un fetch a una API y quiero que devuelva el JSON. Pero siempre me devuelve una Promesa.

function getData() {
  const response = fetch('https://api.example.com/data');
  const data = response.json();
  return data; // Esto devuelve una Promesa, no el objeto
}

Sé que tengo que usar await, pero si lo pongo, me obliga a que la función sea async, y entonces la función sigue devolviendo una Promesa. ¿Cómo obtengo el valor "real"?

Vinyl

Estás en el buen camino. Has descubierto la regla fundamental del código asíncrono: "async se propaga". Una vez que entras en el mundo de las promesas, te quedas en él.

Tu función debe ser async y debe devolver una promesa. El que LLAMA a tu función es el que tiene que usar await para obtener el valor resuelto.

// La función que obtiene los datos (correcta)
async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// Cómo la usas
async function main() {
  const myData = await getData(); // Aquí obtienes el valor real
  console.log(myData);
}

main();

Climbing

¡Ahora lo entiendo! El "contagio" del async. Tenía que cambiar el chip. Muchísimas gracias por la explicación tan clara y el ejemplo.