在Vue js中導入axios方法的正確語法

Question

我試圖通過導入它們而不是直接在創建的鈎子中調用它來將我的axios調用與我的主vue實例分開。

我在一個名為data.js的單獨文件中有這個

import axios from 'axios'
export default{
    myData() {
        return axios.get(`http://localhost:8080/data.json`)
            .then(response => {
                // JSON responses are automatically parsed.
                return response.data;
            })
            .catch(e => {
                return this.myErrors.push(e)
            });
},

在我的vue實例中，我有以下內容：

import myDataApi from '@/api/data.js'

export default {
    name: 'app',
    components: {
        myDataApi, // not sure if this is correct
    },
    data: function () {
        return {
            myInfo: '',
        }
    },
    created() {
        this.myInfo = myDataApi.myData();
        console.log('this.myInfo= ', this.myInfo)
    },

我試圖用myData調用的json填充myInfo。 這將返回Vue devtools中的[object Promise]和控制台中的Promise {<pending>} 。

我需要的所有數據都在一個名為[[PromiseValue]]:Object的數組中的Promise {<pending>}內[[PromiseValue]]:Object所以我知道它正在工作，我只需要知道實現它的正確方法。

Answer 1

我目前沒有啟用開發環境來測試它，但我注意到您正在嘗試在組件初始化時分配變量。 這個對象是一個承諾，但是在您導入它的組件內部解析后，您不會處理它。

我建議嘗試處理實際組件內部的承諾，例如：

import myDataApi from '@/api/data.js'

export default {
    name: 'app',
    components: {
        myDataApi, // not sure if this is correct
    },
    data: function () {
        return {
            myInfo: '',
        }
    },
    created() {
        myDataApi.myData()
          .then((data) => {
            this.myInfo = data
            console.log('this.myInfo= ', this.myInfo);
          });
          .catch((e) => handleError) // however you want to handle it

    },

Answer 2

只是添加到@LexJacobs的答案。 我省略了.then（）中數據的括號，如下所示。 Vue正在咆哮着即使有數據也無法獲得數據。 這解決了這個問題，雖然老實說我不知道​​為什么。

myDataApi.myData()
    .then(data => {
        this.dataHasLoaded = true;
        this.myInfo = data;
    })
    .catch(e => {
        this.myErrors.push(e)
    });