javascript - 类导入到Vue组件中

Question

我想为 axios 请求创建单独的类，其工作方式类似于“服务”

Vue 组件:

<template>
    <div v-for="user in users">
        {{ user.firstname }} - {{ user.lastname }} - {{ user.middlename }}
    </div>
</template>

<script>
    import ConnectionService from './ConnectionService';
    const connectionService = new ConnectionService();

    export default {
        mounted() {
            console.log('Component is mounted');
        },

        created() {
            this.users = connectionService.getSingleInstance('http://laravelapi/user');
            console.log("This are users " + this.users);
        },

        data() {
            return {
                users: [],
            }
        }
    }
</script>

服务如下:

export default class ConnectionService {

    getSingleInstance(path) {
        console.log('This is path ' + path);

        let axios_data = {};
        axios.get(path).then(response => axios_data = response.data.result);

        console.log('This is data ' + axios_data);
        console.log(axios_data);

        return axios_data;
    }


}

正如我在控制台中看到的，我从 axios xhr 请求获取数据，但随后它们没有传递到 Vue 组件，因为我在字符串 console.log("This are users "+ this 中得到空对象.用户)；

如何正确导入 CONnectionService 并在 Vue 组件中使用它？

Answer 1

修改 vue 组件中的下一个:

created() {
    connectionService.getSingleInstance('http://laravelapi/user')
        .then(function(response){
            this.users = response
            console.log("This are users " + this.users);
        })
        .catch(function(error){
            console.log(error)
        });
}

就像 getSingleInstance 返回一个对象一样，我建议像这样声明用户:user: Object 或 user: {} 而不是 user: []

看来你必须使用 Promise，因为 .get 是一个异步函数。要安装 Q Promise 包，请参阅:Q

如何在您的示例中使用:

import Q from 'q'

export default class ConnectionService {
    getSingleInstance(path) {
        var deferred = Q.defer()
        console.log('This is path ' + path);

        axios.get(path)
            .then(
                 function(response) {
                     deferred.resolve(response.data.result)
                 },
                 function(error){
                     deferred.reject(error)
                 })
        return deferred.promise
    }
}

如您所见，我更改了箭头语法 (=>)，因为我澄清了更多类似这样的内容。

我无法测试它，我也不是专家(我只是想提供帮助)，但我认为它应该有效。