[Vue.js] Vue.js axios service 설정 ( Axios 라이브러리 )

* Axios 라이브러리 만들기

작은 규모의 프로젝트를 하게되면 몰라도 큰 프로젝트를 하는 경우엔 하나의 컴포너트 안에 수많은 비동기 처리 로직이 생길 수 밖에 없다. 이런 경우에 Axios 로직만을 따로 처리해 service.js 로 만들어 처리하기로 했다. (컴포넌트에서는 응답/오류를 받아 처리만 해주는 형태가 된다.)

 

-> 백엔드에서 MVC 패턴에서 service(비즈니스 로직)를 만드는 것과 비슷하다고 생각하면 될 듯 하다 !

 

 

1) service 만들기

- schoolService.js

import $axiosInst from '@/axios/AxiosInst';

export class schoolService {

    /**
     * school 로그인 하기
     */
    schoolLogin(loginObj) {
        return $axiosInst
            .post(`/school/login` + loginObj)
            .then( response => {
                console.log(response)
            }).catch( error => {
                console.log(error);
            });
    }
    /**
     * school-detail 정보 가져오기
     */
    getSchoolDetail(schoolIdx) {
        return $axiosInst
            .get(`/school/detail` + schoolIdx)
            .then( response => {
                console.log(response)
            }).catch( error => {
                console.log(error);
            });
    }

}

schoolService를 만들고 AxiosInst를 주입한 뒤, 컴포넌트에서 만들고자 했던 method를 넣어주었다.

 

 

2. 부모 컴포넌트에서 provide하기

- main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/routes/router';
import { schoolService } from '@/service/actorsService/schoolService'

new Vue({
  render: h => h(App),
  router,   
  provide : {
    schoolService: new schoolService,  // 부모 컴포넌트에서 설정
  }
}).$mount('#app')

 

부모 컴포넌트의 데이터를 자식 컴포넌트에서 사용하기 위해서는 provide - inject 를 사용 할 수 있다.

그렇기 때문에 main.js 에서 schoolService 를 주입하고 provide 로 해당 서비스를 선언한다.
여기서 provide 된 서비스는 inject 로 사용하기 원하는 컴포넌트에서 부를 수 있다.

 

 

- schoolPage.vue

<script>

export default {
  name: "SchoolPage",
  inject: ['schoolService'],   // Inject를 통한 schoolService 주입
  data() {
    return {
      schoolIdx: '',
      schoolId: '',
      schoolName: '',
      schoolEmail: '',
      schoolAddress: '',
      schoolPostcode: '',
      schoolPhone: '',
      schoolGradeNum: '',
      schoolStudentNum:''
    }
  },
  mounted() {
    this.getSchoolDetail();
  },
  methods : {
     async getSchoolDetail() {   // schoolService 사용
      const response = await this.schoolService.getSchoolDetail(this.schoolIdx);
      console.log("response: " + response);
      }
    }
}
</script>

 

자식 컴포넌트에서는 부모 컴포넌트의 데이터를 가져와서 사용 할 수 있다.

provide로 설정된 schoolService를 inject로 선언해준 뒤 해당 service를 사용 할 수 있다.

this.schoolService.method 형태로 사용하면 schoolService 내의 해당 메소드가 불러진다.

 

---

하위 컴포넌트에서 상위 컴포넌트의 데이터를 받아 사용하기 위해서는 provide-inject 뿐만 아니라 props를 사용할 수 있지만 여러개의 컴포넌트가 사용 되는 경우, 가장 최하위 컴포넌트에서 가장 최상위 컴포넌트의 props들을 전달 받기 위해서는 provide-inject가 편리하게 이용 될 수 있다.

 

provide-inject 는 추적이 어렵기 때문에 컴포넌트 구조가 복잡할 경우엔 사용을 지양해야 한다.