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

上面的代码负责向后端rest发出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警告:创建钩子中的错误：“WEBPACK_IMPORTED_MODULE___services_articles_getLatest.a :TypeError不是构造函数”

而命令行中的错误是：

39:35-44“出口'getLatest‘在’./../服务/文章/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()是一个函数而不是一个对象。

这可能是解决了的错误问题。