0

Estoy intentando conseguir el valor que me retorna un fetch y no estoy consiguiendo. Este es el código

function getData() {
    let url = 'https://random-word-api.vercel.app/api?words=1&length=5&type=uppercase'
    fetch (url)
      .then(response => response.json())
      .then(data => {return data[0]})}

function showData() {
    let api = getData();
    console.log(api);
    return api
}

showData()

Me sale siempre undefined, y cambiando de api pasa lo mismo, quisiera saber cual exactamente es mi error.

1
  • 1
    Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! no te falta un await ahi?
    – gbianchi
    Commented el 28 feb. a las 13:46

2 respuestas 2

0

Tenes 2 errores:

  • La función getData no devuelve nada, es decir, falta hacer return de algo.
  • La API fetch realizas una llamada asincrónica, por lo que devuelve una Promise. A raíz de esto tenés 2 opciones, usar:
    1. async/await
    2. then

Ejemplo usando la opción # 1

function getData() {
    let url = 'https://random-word-api.vercel.app/api?words=1&length=5&type=uppercase'
    return fetch (url) // <- 1) hacemos return
      .then(response => response.json())
      .then(data => data[0])
}

// 2) definimos funcion async
async function showData() {
    let api = await getData(); // 3) así podemos usar await
    console.log(api);
    return api
}

showData()

0

Estas trabajando con promesas, las promesas no pueden "retornar" lo que haces es suscribirte y para acceder al dato tienes que hacerlo dentro del then

si quieres hacerlo fuera del then tienes que hacerlo a través de otra función

let url = 'https://random-word-api.vercel.app/api?words=1&length=5&type=uppercase';


function getData() {
    fetch (url)
    .then(response => response.json())
  .then(data => console.info('getData', data));
}

getData()

async function asyncGetData() {
  const response = await fetch(url);
  return response.json();
}

asyncGetData().then(d=> console.info('asyncGetData', d));

function writeToContainer(data) {
  document.getElementById('container').innerText = data;
}

asyncGetData().then(d=> writeToContainer(d[0]));
<div id="container"></div>

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.