Vue.jsローカルストレージから値を取得するAxios（localforage）は、値の代わりにプロミスオブジェクトを返します

Question

localforageからaxiosコールの値を取得しようとしていますが、機能しません。

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

私はコンソールでこれで403エラーを取得しています： "https://api.example.org/api/?uname=[object%20Promise]" GET：

XHRのロードが失敗しました。

私もthis.$getItem('LSuname').then(value => { return value })とthis.$getItem('LSuname').then(function (value) { return value })を試してみましたが、私は最後

で約束してまったく同じ403と悪いのURLを取得し、私は正しくそうのような他の場所に私VUEで問題なく値を返すことができています：

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

Answer 1

this.$getItemがPromiseを返します非同期呼び出しであるように見えます。これは、それらの非同期呼び出しの戻り値に依存するコードを呼び出す前に、その呼び出しが終了するのを待たなければならないことを意味します。あなたの場合、あなたは非同期のすべてを待つPromise.all()を使用することができて

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