[Vue.js] Axios 간단하게 사용하기

 

Axios 를 통해서 Vue.js에서

API를 호출할 수 있다. 

 

먼저 설치는 아래와 같이 진행한다.

npm install axios --save

 

설치를 하고나서 src > api 폴더를 만들어주고, 그 아래에 index.js 를 만든다.

 

이후 아래와 같이 임포트를 먼저 해주고,

 

baseUrl 를 설정해준다. 

 

이후 함수에 따라서 원하는 Axios 리턴 함수를 작성하여 준다.

 

마지막으로 export 를 하여 함수를 리턴해주면, 다른 컴포넌트에서 사용할 수 있다.

import axios from 'axios'; //자동으로 노드모듈에서 가져오는거임

// 1. HTTP Request & Response와 관련된 기본 설정
const config = {
    baseUrl: 'https://api.hnpwa.com/v0/'
};

// 2. API 함수들을 정리
function fetchNewsList(){
   //return axios.get(config.baseUrl + 'news/1.json');
   return axios.get(`${config.baseUrl}news/1.json`);
}

function fetchJobsList(){
   //return axios.get(config.baseUrl + 'news/1.json');
   return axios.get(`${config.baseUrl}jobs/1.json`);
}

export{
    fetchNewsList,
    fetchJobsList
}

 

다 작성을 하였다면,

 

아래와 같이 Vue 컴포넌트 파일에 서 사용해준다.

 

먼저 스크립트 안에 import 문에 아까 export 했던 함수명과, from '@/api' 를 넣어준다.

 

이후 버튼을 클릭하던, created때에 실행하던 원하는 함수안에서 

 

fetchJobsList()와 같이 함수명을 만들어주고,

 

.then 에서는 성공했을때의 동작을,

.catch에서는 실패했을때의 동작을 적어준다.

여기에서는 data안에 jobs 에다가 response.data를 넣었고,

<template> 
    <div>
        <div v-for="job in jobs" > {{ job.id }}</div>
    </div>
</template>


<script>
    import { fetchJobsList } from '@/api';
    export default {
        data(){
            return{
                jobs: []
            }
        },
        created(){
            fetchJobsList()
            .then(response => this.jobs = response.data)
            .catch(error => console.log(error));
        }
        
        
    }
</script>

<style lang="scss" scoped>

</style>

 

이것을 맨위 div안에 v-for를 사용하여 data들의 Id만들 가져오게끔 job.id 로 출력하였다.

 

아래와 같은 결과를 얻을 수 있다.

 

 

이상으로 Axios의 간단 사용법을 알아보았다.

 

다음은 Vue에서 상태관리 모듈인 Vuex의 사용방법에 대해 알아보겠다.