2017-11-19 1 views
7

저는 vue2JS를 처음 사용하고 있으며 현재 vue2에서 처음으로 서비스를 만들려고합니다.서비스가 vue2JS에 있음 - 생성 된 후크에 오류가 발생했습니다.

이 코드와 함께 기본 파일 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); 
     }); 
    } 
} 

위의 코드는 응답 JSON을주고 나머지 API 백엔드에 대한 HTTP 요청을 할 책임이 있습니다.

그리고 마지막으로 내 구성 요소 <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을 볼 수 있어야합니다.

이 작동하고 나에게 크롬 콘솔에서이 오류를 제공하지 않습니다 : 명령 줄에서

[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

files structure

편집 나는 명령 라인과 {} 구성 요소 가져 오기에 표시 오류를 추가했다. 나는 아직도 문제를 해결하지 못했다. 내가 코드의 더 설명을 추가 대답을 찾고 편집 24.11.17

은 내가 게시 한 어쩌면 그것은 파일 구조의 스크린 샷을 도울 수 있다면.

+0

번들러는 가져 오기에 .js 확장자가 필요합니까? '''import {getLatest} from'../../../ services/articles/getLatest '; "'' – Fred

+0

제 생각으로는 이것이 제 웹 페이지입니다. k.base.conf.js 구성 파일 : https://gist.github.com/anonymous/8cfe140faaa9f3e79805db56d7cb8902 – BT101

+0

스크립트 태그에서'const getLatestService = new getLatest();'를 호출 하시겠습니까? 왜 여기에 '새'라는 키워드를 사용하고 있습니까? 그것은 객체를 인스턴스화하려고 시도 할 것입니다. 여러분이 함수를 호출하려고하고 있다고 생각할 때입니다. – Phil

답변

관련 문제