Home / Questions / 58142
Accepted
toledano
Asked: 2020-03-27 18:06:09 +0800 CST 2020-03-27 18:06:09 +0800 CST

Get the value of a promise

  • 772

I'm having a lot of trouble getting the value of a promise . Basically I want the return value of a promise to be assigned to a variable. For example

This example uses the following elements: , , almacenis a synonym for localForage, a package for use with local storage.

With this code I get the errorCannot read property 'getItem' of undefined

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

So I use a function .then()and get the same error above

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

So I convert my variable _accessTokento a function.

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

Here I don't have any syntax errors, but the variable when evaluated returns an error, which says (error during evaluation).

Now if I make a function and use the promise inside, it works. For example:

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}`))
}

Here everything works as expected, but I insist on using my variable, so I add it:

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}`))
}

When evaluating the function, I get an error:
Uncaught TypeError: Cannot read property 'toString' of undefined.

The truth is I'm just guessing and I can't get it right.

How can I save the value of the promise in the indicated variable?

Edit

So that you can see how the application works, I have created a small jsfiddle that reproduces the problem:

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

javascript

2 Answers

  1. Best Answer

    Ok so I've been wanting to learn how to use Vue.js and I didn't think I was going to start from scratch so first of all I don't know what I'm doing regarding observables, computed and data properties. I apologize in advance if the solution is crude.

    What I can tell you is that to get the value of the promise you must always return . So where does it say:

    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}`))
}

    You are not returning anything. That function always assigns an undefined value.

    If instead I said:

    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}`))
}

    You could then say:

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

    And it would be seen in your template.

    I left you a fiddle

    https://jsfiddle.net/3o69qjpz/

    However, going back to your original fiddle, it seems that you can opt for a shorter and perhaps dirty solution which is to assign directly this.accessTokeninside the method _getAccessTokenby doing:

    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}`))
}

    And that works the same. But I insist, that is not the way to work with a promise, because the idea is that _getAccessTokenit is thenable for any other use and resolves to the value of the token. This last workaround just takes advantage of a side effect and I wouldn't use it like that.

    • 3

  2. Had the same problem with Axios. She could neither send nor receive any data handled by Axios and he saw the information inside Axios but he couldn't work with it outside.

    I started reading about promises and concluded that this technology always evaluates the operation for success or failure first . If there is an error, it never goes through the del function .thenand if there is success, it does.

    It always gave me the same error

    Cannot read property 'xxxx' of undefined

    and it was because the assignment was never configured or when the assignment was made the data had not yet been entered (asynchrony). By returning the answer to another .then, one is assured of taking the data.

    axios().then(response => {return response}.then{respuesta => { this.dato = respuesta}.catch{...}
    • 0