Vue3 기초 예제 - Axios 모듈화(async/await)

async / await 간단한 설명과 Axios 모듈화 기초 예제

*자세한 설명 생략

 

 

▷ async / await 이란?

 

    - Javascript의 싱글 스레드, 비동기 처리 방식( Callback, Promise )을 보안한 문법

      *동기/비동기 설명 생략 

 

    - 가독성과 유지보수성을 향상

      *Callback Hell, Promise Hell

 

    - 실행 완료까지  기다리고 다시 진행

 

 

▷ 기초 예제 - Axios 모듈화

*post 예제

 

- main.js

*Axios 등록 제거

import { createApp } from 'vue'
import App from './App.vue'
import { router } from '@/router/MenuNav.js'
import { createPinia } from 'pinia'

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

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

 

- AxiosModule.js

import Axios from "axios"

const __ = "http://IP:PORT";

const API_LIST = {
    /** 로그인 */
    "BHS_CMM_LGN" : __+"/bhs/cmm/login.do",

}

function sendPost(API_URI, REQ_DATA) {
    return Axios
        .post(API_URI, REQ_DATA)
        .then((res) => {
            return  res.data
        })
        .catch((res) => {
            return res.data
        })
}

export { API_LIST, sendPost };

 

- LoginTestCmp.vue

<template>
    <div class="APICallTestCmp">
        <h1>🏠 HOME</h1><br /><br />
        <div class="login">
            <h2>Login</h2>
            <input v-model="id" placeholder="아이디">
            <input v-model="pwd" placeholder="패스워드">
            <button @click="call(id, pwd);">Login</button>
        </div><br />
        <div>
            <h4>JWTStore : </h4>
            <div style="width: 700px; height: 150px; overflow: auto;">
                {{ useLoginStore().JWT }}
            </div>
        </div>
        <div>
            <h4>API Response : </h4>
            <div style="width: 700px; height: 150px; overflow: auto;">
                {{ result }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { router } from '@/router/MenuNav.js'
import { useLoginStore } from '@/store/LoginStore.js'
import { API_LIST, sendPost } from '@/assets/js/utils/AxiosModule.js'

const id = ref("")
const pwd = ref("")
const result = ref("")

async function call(id, pwd) {

    const REQ_DATA = {
        "id": id,
        "pwd": pwd
    }

    /** 로그인 요청 */
    const resVO = await sendPost(API_LIST.BHS_CMM_LGN, REQ_DATA);
    if (resVO.resultCode == "0000") {

        result.value = resVO.jwt

        useLoginStore().setUser(resVO.jwt)

        router.push({ path: "/" })

        alert("로그인 완료")

    } else {
        alert(resVO.resultMsg)
    }
}
</script>

 

 

▷ 결과 확인

*이전 포스팅과 동일

*이전 포스팅 아래 관련 글 참고(Vue3 기초 예제 - 로그인(pinia))

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리