[axios] API 호출하기

 

전에 업로드 했던 포스팅에서 vue프로젝트와 spring boot로 생성한 api프로젝트를 연동하는 작업까지 마치었고, 이제 직접 api로 반환받은 데이터를 vue프로젝트에서 접근할 수 있도록 통신하는 작업에 대해 정리해보았다. 목차는 아래와 같다.

01. axios란?
02. 연동 예시

---

 

01. axios란?

일반적으로 node.js에서 api통신을 하기 위해 사용하는 라이브러리이다. javascript에서는 유사한 동작을 하기 위해 ajax를 활용하였다면, vue나 react등에서는 axios를 활용하여 api 통신 작업을 한다고 이해하면 된다. 

 

 

---

 

 

02. 연동 예시

 

axios 설치

이 라이브러리를 사용하기 위해서는 우선적으로 설치 작업을 진행해야 한다. 설치를 위한 방법은 한가지 이상인데, 본인의 경우 npm 명령어를 활용하여 axios라이브러리를 설치하는 방법에 대해 설명할 것인데, 그냥 터미널에 아래 명령어를 입력해주는 것으로 설치는 완료된다.

>> npm install axios

---

axios 활용

vue 파일에서 <script>태그 내부에 작성될 내용을 아래에 작성해보았다.

    import axios from 'axios';

    export default {
        name: "YEBO",
        data() {
            return {
                data: []
            };
        },
        created() {//DOM이 생성되기 전에 fetchData()함수 호출
            this.fetchData();
        },
        methods: {
            async fetchData() { // async를 선언함으로써 await(동기적처리)를 사용할 수 있게 됨.
                try {
                    const response = await axios.get('/ask'); //api URL
                    //const response = await axios.get('http://localhost:8081/ask');와 같다.
                    
                    this.data = response.data; // 받아온 데이터를 Vue의 data에 저장합니다.
                    console.log(this.data) //data콘솔에 출력해보기
                } catch (error) {
                    console.error(error);
                }
            }
        }

    }

 

 

api의 url을 작성할때는, "http://localhost:포트번호/요청"과 같이 작성해줄 수도 있지만, 호출 요청은 외부로 드러날때 굉장히 취약하다. vue.config.js에서 프록시 설정을 진행하여 vue에서 요청이 들어갔을때, 해당 요청이 외부에 들어나지 않되, 정상적인 요청주소가 호출되도록 작업할 수 있다. 아래에 추가된 프록시 설정으로 인해 axios.get('url')에서 아래 target에 작성된 url부분은 생략한 채 작성할 수 있다. 이때 해당 부분을 생략하지 않는다면 예외가 발생하게 된다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  // npm run build 타겟 디렉토리
  outputDir: '../backend/src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: {
      '/': {//기본 호출
        target: "http://localhost:8081",
        changeOrigin: true
      },
      '/ask': { //
        target: "http://localhost:8081",
        changeOrigin: true,
        pathRewrite: {"^/ask":""} //http://localhost:8081/ask에서 /ask를 사용자의 눈에 보이지 않도록 삭제함.
      },
    }
  },

})

---

 

결과

성공!

 

---

 

 

 

axois와 ajax의 차이에 대해 궁금하다면 아래 블로그 링크를 참고할 수 있다.

https://velog.io/@devstone/React%EC%97%90%EC%84%9C-Axios%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0-feat.-fetch-ajax

React에서 Axios를 이용해 API 호출하기 (feat. fetch, ajax)