3

Estoy teniendo muchos problemas a la hora de obtener el valor de una promise. Básicamente quiero que el valor que devuelve una promesa quede asignado a una variable. Por ejemplo

En este ejemplo se usan los siguientes elementos: , , almacen es un sinónimo de localForage, un paquete para usar con el almacenamiento local.

Con este código obtengo el error Cannot read property 'getItem' of undefined

let _accessToken = this.almacen.getItem('token')

Entonces uso una función .then() y obtengo el mismo error anterior

let _accessToken = this.almacen.getItem('token').then(carga => carga)

Entonces convierto mi variable _accessToken en una función.

let _accessToken = () => this.almacen.getItem('token').then((carga) => carga)

Aquí no tengo ningún error de sintaxis, pero la variable al ser evaluada me devuelve un error, que dice (error during evaluation).

Ahora bien, si hago una función y uso la promesa dentro, si funciona. Por ejemplo:

function _getAccessToken () {
  this.almacen.getItem('token')               // consulto el almacenamiento
    .then((payload) => {                      // obtengo el resultado
      if (payload) {
        this.$store.state.token = payload     // lo guardo en una variable global
        this.$store.state.fuera = false       // altero otra variable
      } else this.$store.state.fuera = true
    }).catch((e) => console.log(`Error ${e}`))
}

Aquí todo funciona como se espera, pero insisto en usar mi variable, así que la agrego:

let _accessToken = ''                            // declaro mi variable

function _getAccessToken () {
  this.almacen.getItem('token')
    .then((payload) => {
      if (payload) {
        _accessToken = payload                   // Aqui intento asignar la promesa
        this.$store.state.token = payload
        this.$store.state.fuera = false
      } else this.$store.state.fuera = true
    }).catch((e) => console.log(`Error ${e}`))
}

Al evaluar la función, obtengo un error:
Uncaught TypeError: Cannot read property 'toString' of undefined.

La verdad solo estoy adivinando y no consigo atinarle.

¿Cómo puedo guardar el valor de la promesa en la variable indicada?

Edit

Para que puedan observar el funcionamiento de la aplicación he creado un pequeño jsfiddle que reproduce el problema:

https://jsfiddle.net/jstoledano/hjawnnh2/1/

6
  • Estás ejecutando _getAccessToken() e inmediatamente a continuación leyendo el contenido de _accessToken? el 27 mar. 2017 a las 3:12
  • Hola @SebastiánGrignoli, si entendí bien tu pregunta, estoy asignado el valor de la promesa, payload, cuando esta se resuelve... creo, no entiendo bien todavía esto de las promesas.
    – toledano
    el 27 mar. 2017 a las 3:16
  • Te dice en qué línea arroja ese error? el 27 mar. 2017 a las 3:28
  • Si arriba de _accessToken = payload ponés console.log(_accessToken) qué sale en la consola? el 27 mar. 2017 a las 3:30
  • 1
    Estaría bueno si pudieras crear un fiddle con esa parte de tu código para que lo pueda probar... jsfiddle.net el 27 mar. 2017 a las 3:33

2 respuestas 2

3

Ok, tenía ganas de aprender a usar Vue.js y no pensé que iba a empezar de atrás para adelante así que, ante todo, no sé lo que estoy haciendo respecto a observables, computed ni data properties. Pido disculpas de antemano si la solución es burda.

Lo que sí te puedo decir, es que para obtener el valor de la promesa siempre debes retornar. Así que donde dice:

function _getAccessToken () {
  localforage.getItem('token')
    .then((payload) => {
      if (payload) {
        this.$store.state.token = payload
        this.$store.state.fuera = false
      } else this.$store.state.fuera = true
    }).catch((e) => console.log(`Error ${e}`))
}

No estás retornando nada. Esa función siempre asigna un valor undefined.

Si en cambio dijera:

function _getAccessToken () {
  return localforage.getItem('token')
    .then((payload) => {
      if (payload) {
        this.$store.state.token = payload
        this.$store.state.fuera = false
      } else {
        this.$store.state.fuera = true
      }
      return payload;
    }).catch((e) => console.log(`Error ${e}`))
}

Después podrías decir:

var app = new Vue({
  el: '#app',
  store,
  mixins: [sessionService],
  computed: Vuex.mapState(['token', 'fuera']),
  mounted () {
    this.getAccessToken().then((token)=>{
        this.accessToken=token;
    })
  }
})

Y se vería en tu template.

Te dejé un fiddle

https://jsfiddle.net/3o69qjpz/

Sin embargo, volviendo a tu fiddle original, tal parece que se puede optar por una solución más corta y tal vez sucia que es asignar directamente this.accessToken dentro del método _getAccessToken haciendo:

function _getAccessToken () {
  localforage.getItem('token')
    .then((payload) => {
      if (payload) {
        this.accessToken = payload     // <-- asignación directa
        this.$store.state.token = payload
        this.$store.state.fuera = false
      } else this.$store.state.fuera = true
    }).catch((e) => console.log(`Error ${e}`))
}

Y eso funciona igual. Pero insisto, esa no es la manera de trabajar con una promesa, porque la idea es que _getAccessToken sea thenable para cualquier otro uso y resuelva al valor del token. Este último workaround sólo toma ventaja de un efecto secundario y yo no lo usaría así.

1
  • Gracias, ya casi le entiendo a las promises.
    – toledano
    el 29 mar. 2017 a las 16:32
0

Tenía el mismo problema con Axios. No podía ni enviar ni recibir ningún dato que manejara Axios y veía la información dentro de Axios pero no podía trabajarla afuera.

Me puse a leer sobre promesas y, concluí, que esta tecnología siempre evalúa la operación para éxito o fracaso primero. Si existe error nunca pasa por la función del .then y si hay éxito lo hace.

Siempre me daba el mismo error

Cannot read property 'xxxx' of undefined

y era porque nunca se configuraba la asignación o cuando se hacía la asignación todavía no había entrado el dato (asincronismo). Al retornar la respuesta a otro .then se asegura uno de tomar el dato.

axios().then(response => {return response}.then{respuesta => { this.dato = respuesta}.catch{...}
1
  • 2
    No sale sobrando que expliques un poco más el código. Saludos. el 13 nov. 2017 a las 0:31

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.