es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Fetch API dentro de una función de clase

17 Jul, 2023 Programación

Estoy teniendo problemas con la desestructuración de un objeto que se devuelve desde la API fetch en mi clase Aztro.

He intentado varias formas de desestructurarlo al azar sin éxito….

Si lo devuelvo en lugar de usar console.log, ¿cómo accedo a él? Consulta el código y los comentarios para obtener más claridad sobre mis preguntas.

La razón por la que quiero hacer esto es porque la API solo devuelve un signo del zodiaco a la vez.

class Aztro {
  constructor(sign){
    this.sign = sign
  }
  getData(){
    return fetch('https://example/?sign=' + this.sign + '&day=today', {
      method: 'POST'
    })
    .then( response => response.json() )
    .then( data =>  {
      console.log(data) // cómo puedo desestructurarlo si se devuelve y no solo se muestra en la consola
    })
  }
}

let aries = new Aztro('aries')      // Puedo pasar signos del zodiaco para obtener los datos
let aquarius= new Aztro('aquarius')

aries.getData()     // esto registra los datos JSON en la consola....

// EDITAR así es como intenté desestructurarlo 

const {description} = aries
const {description} = aries.getData() // esto devuelve "Object promise" cuando intenté mostrarlo en el DOM
const {description} = Aztro
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder al objeto devuelto por el método getData() de la clase Aztro, es necesario encadenar un método .then() a la llamada del método y devolver el objeto data desde él. Luego puedes desestructurar el objeto según desees.

    Aquí hay una versión actualizada del código con comentarios para aclarar esto:

    class Aztro {
  constructor(sign){
    this.sign = sign
  }
  getData(){
    return fetch('https://example/?sign=' + this.sign + '&day=today', {
      method: 'POST'
    })
    .then( response => response.json() )
    .then( data =>  {
      return data // devolver el objeto data aquí
    })
  }
}

let aries = new Aztro('aries')      
let aquarius= new Aztro('aquarius')

aries.getData()
  .then( data => {
    const { description } = data // desestructurar el objeto data
    console.log(description) // mostrar la propiedad deseada
    // puedes hacer cualquier cosa con los datos aquí, como renderizarlo en el DOM
  })

    Cabe mencionar que también puedes usar la sintaxis async/await para manejar promesas de manera más sincrónica:

    async function obtenerDatosAries() {
  let aries = new Aztro('aries')
  const data = await aries.getData()
  const { description } = data
  console.log(description)
  // hacer otras cosas con los datos
}

obtenerDatosAries()

    En este ejemplo, la función obtenerDatosAries() se declara como async y usa la palabra clave await para esperar a que el método getData() resuelva su promesa y devuelva el objeto de datos. El resto del código se ejecuta después de que se resuelve la promesa, por lo que puedes desestructurar y procesar el objeto de manera segura.

Comments are closed.