[Vue] Vue3 환경에서 axios를 사용해보자.

기존에 javascript에서 axios를 사용할 때는 그냥 <script>를 통해서 가져왔었다.

근데 Vue 환경에서는 조금 달라서.. ( 물론 그냥 <script>를 통해서 가져 올 수는 있지만.. )

정리해보려고 한다. 기존의 axios 사용법이 궁금한 사람은 아래 링크를 통해 확인해보자.

https://bongra.tistory.com/57

[JS] AJAX를 통한 동적으로 서버통신을 해보자. (feat. Js, JQuery, Axios)

 

 

axios 설치 및 사용

============================================================================

npm명령어를 통해 axios를 설치해준다.

npm install --save axios

 

그럼 package.json에 axios가 추가 되는데..

 

이제 main.js에서 import 및 전역화 해주면 된다.

 

main.js 추가 코드

import axios from "axios"; -- axios import

-- axios 전역화 및 뷰인스턴스 생성
const app = createApp(App) 
app.config.globalProperties.$axios = axios; 
app.mount('#app')

 

이렇게 하면 컴포넌트에서 axios를 사용할 수 있다.

 

this.axios.get(URL+queryParams).then((response) => { // 실제 API를 요청한다/
    console.log(response.data);
    this.movieList = response.data.response.body.items.item; // 받아온 데이터를 movieList 배열에 넣어준다.
    console.log('영화목록 : ' + this.movieList);
  })

이때 axios 앞에 this. 를 붙여주는 걸 잊지 말자.