Estoy tratando de cargar datos recuperados de mi API usando axios en la función de datos vue.js. He dividido el proceso en dos funciones, una que recupera los datos de mi api y los asigna a una variable y otra que debe manipularlos.
desafortunadamente, cuando registro los datos en cada función, obtengo resultados diferentes.
esto es lo que estoy haciendo:
let sendGetRequest = async () => { try { console.log('getting'); const res = await axios.get('/api/v1/leaderboard'); let resData= res.data this.pastWinners = resData.history this.chart = resData.chart console.log('this ', this.chart) this.users = resData.users } catch (err) { console.error(err) } }; let objectManipulation = () => { console.log('manipulating'); console.log(this.chart) } sendGetRequest(); objectManipulation(); el primer registro (de sendGetRequest ) devuelve los datos como debería ser:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]mientras que la segunda función devuelve:
[__ob__: Observer] length: 0 __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0} [[Prototype]]: Array¡Gracias!
Gracias a la respuesta de @daantje pude solucionar el problema.
para resolverlo, llamé a sendGetRequest desde dentro de objectManipulation usando async & await , así:
let sendGetRequest = async () => { try { console.log('getting'); const res = await axios.get('/api/v1/leaderboard'); let resData= res.data this.pastWinners = resData.history this.chart = resData.chart console.log('this ', this.chart) this.users = resData.users console.log('done') } catch (err) { console.error(err) } }; let objectManipulation = async () => { // eslint-disable-next-line no-unused-vars let res = await sendGetRequest() console.log('manipulating'); console.log(this.chart) } objectManipulation();