Vue3 기초 예제 - HTTP 통신(Axios)

Axios 간단한 설명과 API 통신 결과를 화면으로 보내는 기초 예제

*자세한 설명 생략

 

 

▷ Axios 란? 

 

    - Vue에서 권고하는 Promise 기반의 HTTP 라이브러리

      *Promise : 비동기 처리

 

    - 서버와 HTTP 통신

 

    - Ajax, fetch와 같은 웹 통신 기능

 

    - JSON 데이터 자동 변환

 

 

▷ Axios 설치

*vue-cli를 통해 Project 생성 후 설치

 

💡npm install axios

 

 

▷ Axios 사용 방법(Post)

axios
.post(URI, data)
.then((res) => { // 성공
	...
 })
.catch((res) => { // 실패
    ...
});

 

 

▷ 기초 예제 - HTTP 통신

 

- main.js

*provide / inject를 사용하여 전역 변수 사용

*provide / inject 설명 생략

*Axios 모듈 사용 등록

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router/MenuNav.js'
import Axios from "axios";

createApp(App)
    /** 모듈 사용 등록 */
    .use(router)

    /** 전역 설정 */
    // Axios
    .provide('$Axios', Axios)
    // API URI
    .provide('$BHS_CMM_LGN', "http://IP:Port/bhs/cmm/login.do")

    /** 연결 */
    .mount('#app');

 

- APICallTestCmp.vue

<template>
    <div class="APICallTestCmp">
        <h1>👨‍🏫 API Call Test </h1><br /><br />
        <h4>아이디 : <input v-model="id" placeholder="아이디"></h4>
        <h4>패스워드 : <input v-model="pwd" placeholder="패스워드"></h4>
        <button @click="call(id, pwd);">API Call</button>
    </div>
    <div>
        <h4>API Response</h4>
        <div style="width: 700px; height: 300px; overflow: auto;">
            {{ result }}
        </div>

    </div>
</template>

<script setup>
import { inject, ref } from 'vue';

const URI = inject("$BHS_CMM_LGN");
const Axios = inject("$Axios");
const result = ref("");

function call(id, pwd) {

    const data =
    {
        "id": id,
        "pwd": pwd
    };

    Axios
        .post(URI, data)
        .then((res) => {

            const resVO = res.data;

            if (resVO.resultCode == "0000") {

                result.value = resVO.jwt;

            } else {

                alert(resVO.resultMsg);
            }
        })
        .catch(() => {
            console.log("실패");
        })
}
</script>

 

 

▷결과 화면

① API Call 초기 화면

 

② 서버로 부터 응답 받은 값 화면에 표출

 

 

▷참고

Vue.js에서 Axios를 이용한 비동기 통신

시작하기 | Axios Docs

[Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지.

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리