Service in vue2JS - error in created hook

Question

I'm new to vue2JS and currently I am trying to create my very first service in vue2 ever.

I've created basic file api.js with this code:

import axios from 'axios';

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

Code above is basic axios configuration which will be used in every service across entire app.

I import this file into my service:

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

Code above is responsible for making http request to backend rest API which give JSON in response.

And then finally I want to use this service inside my component <script></script> tags:

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

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

Here I want to execute code from service and actually execute this http request then save response in getLatestService constant and then console.log it and I should be able to see JSON in my browser console.

This doesn't work and give me this error in chrome console:

[Vue warn]: Error in created hook: "TypeError: WEBPACK_IMPORTED_MODULE_0__services_articles_getLatest.a is not a constructor"

And this error in command line:

39:35-44 "export 'getLatest' was not found in '../../../services/articles/getLatest'

Please help me to solve this problem. Additionally I want to refactor my code from service (second one) to use async await but I just can't find good example which would show me way to accomplish that.

EDIT 22.11.17

I added error which show in command line and { } when importing in component. I still didn't solve the problem.

EDIT 24.11.17

Looking for an answer I add more explanation of code I've posted and screenshot of files structure if maybe it can help.

Answer 1

I have check your code and what i can see is, in your api.js you have used

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

and in your service file

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

In your service file you have not define your localhost port, i think it should be like

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

If above is not an your issue then you should try

const getLatestService = getLatest();

Because getLatest() is a function and not an object.

This might solve your error issue.