Vue.js Axios 从本地存储（localforage）获取值 returns promise 对象而不是值

Question

我正在尝试从 localforage for an axios 调用中获取一个值，但它不起作用。

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

我在控制台中收到 403 错误：

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

我也试过 this.$getItem('LSuname').then(value => { return value }) 和 this.$getItem('LSuname').then(function (value) { return value }) 但我得到了完全相同的 403 和错误 url 最后的承诺

我能够在我的 vue 中正确地 return 值而不会出现问题，就像这样：

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

Answer 1

看起来 this.$getItem 是一个异步调用，它将 return 一个 Promise。这意味着您必须等待该调用完成，然后才能调用任何依赖于这些异步调用的 returned 值的代码。

在您的情况下，您可以使用 Promise.all() 等待对 return 的所有异步调用，然后再进行 axios.get 调用：

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

Vue.js Axios 从本地存储（localforage）获取值 returns promise 对象而不是值

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

javascript

local-storage

localforage

axios

vuejs2