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
'programing' 카테고리의 다른 글
C++ 또는 C에서 foo(void)와 foo() 사이에 차이가 있습니까? (0) | 2022.08.18 |
---|---|
double-c-language에서 절대값을 얻는 방법 (0) | 2022.08.18 |
SFTP를 통해 서버에서 파일을 가져오려면 어떻게 해야 합니까? (0) | 2022.08.13 |
java의 각 루프에 대해 역순으로 할 수 있습니다. (0) | 2022.08.13 |
VueJS 앱 내에서 VuePress 문서에 액세스하시겠습니까? (0) | 2022.08.13 |