vue2JS 中的服务 - 创建钩子(Hook)时出错

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 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 warn]: Error in created hook: "TypeError: WEBPACK_IMPORTED_MODULE_0__services_articles_getLatest.a is not a constructor"

而命令行中的这个错误:

39:35-44 "export 'getLatest' was not found in '../../../services/articles/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()是一个函数而不是一个对象。

这可能 解决你的错误问题。