在Vue js中导入axios方法的正确语法

Question

I am trying to separate my axios calls from my main vue instance by importing them instead of calling them directly in the created hook.

I have this in a separate file called 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)
            });
},

And in my vue instance I have the following:

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

I am trying to populate myInfo with the json called by myData. This returns [object Promise] in Vue devtools and the as Promise {<pending>} in the console.

All the data I need is inside that Promise {<pending>} in an array called [[PromiseValue]]:Object so I know it is working, I just need to know the correct way implementing this.

Answer 1

I don't have a development environment enabled to test this at the moment, but I do notice that you are trying to assign a variable the moment that the component is initialized. This object is a promise, but you're not handling the promise after it is resolved inside the component where you have imported it.

I would recommend trying to handle the promise inside of the actual component, something like:

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

Just to add to @LexJacobs answer. I omitted the parenthesis around data in .then() as seen below. Vue was squawking about data not being available even though it was. This solved that problem, although to be honest I don't know why.

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