vue2JS中的服务 - 创建的钩子中的错误

Question

我是vue2JS的新手,目前我正试图在vue2中创建我的第一个服务.

我用这段代码创建了基本文件api.js:

import axios from 'axios';

export default () => {
    return axios.create({
        baseURL: 'http://localhost:8080/',
        timeout: 10000,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
}

上面的代码是基本的axios配置,将在整个应用程序的每个服务中使用.

我将此文件导入我的服务:

import api from '../api.js';

export default {
    getLatest () {
        return api().get(`http://localhost/obiezaca/ob_serwer/api/article/getLatest.php`, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}

上面的代码负责向backend rest API发出http请求,这会给出JSON作为响应.

最后我想在我的组件<script></script>标签中使用这个服务:

<script>
    import { getLatest } from '../../../services/articles/getLatest';

    export default {
        data () {
            return {
                articles: []
            }
        },
        created () {
            const getLatestService = new getLatest();
            console.log(getLatestService);
        }
    }
</script>

在这里,我想从服务执行代码并实际执行此http请求,然后将响应保存在getLatestService常量中,然后console.log我应该能够在浏览器控制台中看到JSON.

这不起作用,并在chrome控制台中给我这个错误:

[Vue警告]:创建的钩子出错:"TypeError:WEBPACK_IMPORTED_MODULE_0__services_articles_getLatest .a不是构造函数"

并在命令行中出现此错误:

39:35-44在'../../../services/articles/getLatest'中找不到"export'getLatest'

请帮我解决这个问题.另外我想从服务(第二个)重构我的代码以使用异步等待,但我找不到能够告诉我实现这一目标的好例子.

编辑22.11.17

我在组件中导入时添加了在命令行和{}中显示的错误.我仍然没有解决问题.

编辑24.11.17

寻找答案我添加了更多关于我发布的代码的解释和文件结构的截图,如果它可以帮助.

Answer 1

我检查了你的代码，我可以看到，在你使用的api.js中

baseURL: 'http://localhost:8080/',

并在您的服务文件中

return api().get(`http://localhost/obiezaca/ob_serwer/api/article/getLatest.php`

在您的服务文件中，您没有定义本地主机端口，我认为它应该是这样的

返回 api().get(http://localhost:8080/obiezaca/ob_serwer/api/article/getLatest.php

如果上述不是您的问题那么您应该尝试

const getLatestService = getLatest();

因为getLatest()是一个函数而不是一个对象。

这可能会解决您的错误问题。