programing

vue2에서의 서비스JS - 생성된 후크 오류

minecode 2022. 8. 18. 22:28
반응형

vue2에서의 서비스JS - 생성된 후크 오류

vue2는 처음입니다.JS와 현재 저는 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',
        }
    })
}

위의 코드는 앱 전체의 모든 서비스에서 사용되는 기본 악시오 구성입니다.

다음 파일을 서비스로 Import합니다.

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 요청을 담당하며, 이 API는 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] :생성된 후크 오류: "TypeError: WEBPACK_IPORTED_MODULE_0_services_articles_getLatest.a는 생성자가 아닙니다."

명령줄에서 다음 오류가 발생합니다.

39:35-44 "export 'getLatest'가 '../../services/articles/getLatest'에 없습니다."

이 문제를 해결할 수 있도록 도와주세요.또한 비동기 wait를 사용하기 위해 서비스로부터 코드를 리팩터링하고 싶습니다만, 그것을 실현하는 방법을 나타내는 좋은 예를 찾을 수 없습니다.

파일 구조

편집: 22.11.17

구성 요소를 가져올 때 명령줄에 표시되는 오류와 { }을(를) 추가했습니다.나는 여전히 문제를 풀지 못했다.

편집 24.11.17

답을 찾으면서 제가 올린 코드에 대한 설명과 파일 구조의 스크린샷을 추가하겠습니다.

코드를 확인했습니다만, api.js에서 사용하고 있는 것을 알 수 있습니다.

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

및 서비스 파일에

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

서비스 파일에는 로컬호스트 포트가 정의되어 있지 않습니다.다음과 같아야 합니다.

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

상기의 문제가 되지 않는 경우는, 시험해 주세요.

const getLatestService = getLatest();

왜냐면getLatest()는 함수이지 객체가 아닙니다.

이렇게 하면 오류 문제가 해결될 수 있습니다.

언급URL : https://stackoverflow.com/questions/47375900/service-in-vue2js-error-in-created-hook

반응형