[SOLVED] Vue.js Axios get value from local storage (localforage) returns promise object instead of value

Vue.js Axios get value from local storage (localforage) returns promise object instead of value

I am trying to get a value from localforage for an axios call, but it is not working.

axios.get('https://api.example.org/api/?uname=' + this.$getItem('LSuname'), {
  withCredentials: true,
  headers: {'Authorization': 'Bearer ' + this.$getItem('LSmytoken')}
})

I'm getting a 403 error with this in the console:

XHR failed loading: GET "https://api.example.org/api/?uname=[object%20Promise]".

I have also tried this.$getItem('LSuname').then(value => { return value }) and this.$getItem('LSuname').then(function (value) { return value }) but I get the same exact 403 and bad url with a promise at the end

I am able to correctly return the value without issue elsewhere in my vue like so:

this.$getItem('LSuname').then(value => {
  console.log('uname:' + value)
})

Solution

Looks like this.$getItem is an asynchronous call that will return a Promise. This means you have to wait for that call to finish before calling any code which depends on the returned values of those async calls.

In your case, you could use Promise.all() to wait for all of the async calls to return before making the axios.get call:

let unamePromise = this.$getItem('LSuname');
let mytokenPromise = this.$getItem('LSmytoken');

Promise.all([unamePromise, mytokenPromise]).then((vals) => {
  axios.get('https://api.example.org/api/?uname=' + vals[0], {
    withCredentials: true,
    headers: {'Authorization': 'Bearer ' + vals[1] }
  })
})