[Vue.js] - Vue axios 사용법(get, post..) 및 리스트(list) 데이터 렌더링 하는 방법

#Vue.js axios 메서드 종류

Vue.js 에서 axios를 사용할 때 사용 가능한 메서드는 다음과 같습니다:

- **axios.get(url[, config])**: GET 요청을 보냅니다.
- **axios.post(url[, data[, config]])**: POST 요청을 보냅니다.
- **axios.put(url[, data[, config]])**: PUT 요청을 보냅니다.
- **axios.delete(url[, config])**: DELETE 요청을 보냅니다.
- **axios.head(url[, config])**: HEAD 요청을 보냅니다.
- **axios.options(url[, config])**: OPTIONS 요청을 보냅니다.
- **axios.patch(url[, data[, config]])**: PATCH 요청을 보냅니다.

이 외에도, `axios.request(config)` 메서드를 사용하여 사용자 정의 HTTP 요청을 보낼 수 있습니다. 

 

 

#vue.js mixins이란?

Vue.js에서 mixins은 코드 재사용을 위한 기능입니다. Mixins은 여러 컴포넌트에서 공통으로 사용되는 로직이나 옵션들을 추출하여 별도의 객체로 만들고, 이 객체를 컴포넌트에 적용하여 코드를 재사용할 수 있게 해 줍니다.

Mixins을 사용하면 컴포넌트 간에 로직을 공유하고 중복을 피할 수 있습니다. 예를 들어, 여러 컴포넌트에서 동일한 메서드, 계산된 속성, 라이프사이클 훅 등을 사용해야 할 때 mixins을 활용할 수 있습니다.

Mixins을 정의하려면 일반 JavaScript 객체를 생성하고, 해당 객체에 필요한 로직과 옵션들을 정의합니다. 그런 다음, 컴포넌트의 `mixins` 옵션에 배열로 mixins 객체를 추가하여 컴포넌트에 적용합니다. Vue는 컴포넌트와 mixins의 옵션들을 병합하여 최종적인 컴포넌트의 옵션을 생성합니다.

 

 

#mixins.js 파일

1. async, await: 
`async`와 `await`는 JavaScript에서 비동기 코드를 더 쉽게 작성하고 관리하기 위한 키워드입니다.

- `async`: `async` 키워드는 함수를 비동기 함수로 선언합니다. 

비동기 함수는 항상 `Promise`를 반환하며, 내부에서 `await` 키워드를 사용할 수 있습니다.

- `await`: `await` 키워드는 `async` 함수 내에서만 사용할 수 있습니다. `await`는 `Promise`를 기다리는 동안 함수의 실행을 일시 중지하고, `Promise`가 완료되면 해당 결과를 반환합니다. 이를 통해 비동기 코드를 동기적으로 작성할 수 있어 가독성이 좋아집니다.

 

2. axios Promise:
`Promise`는 JavaScript에서 비동기 작업을 다루는 객체입니다. `axios`는 HTTP 요청을 보내고 응답을 받을 때 `Promise`를 반환합니다. 이러한 `Promise`를 사용하여 비동기 요청의 성공, 실패, 완료 등의 상태를 다룰 수 있습니다.

`axios`를 사용하여 HTTP 요청을 보낼 때, `axios`는 `Promise`를 반환합니다. 이 `Promise`를 통해 요청이 성공하면 `then()` 메서드를 사용하여 응답 데이터에 접근할 수 있고, 요청이 실패하면 `catch()` 메서드를 사용하여 에러를 처리할 수 있습니다.

import axios from 'axios';

export default {
    methods: {
        async $api(url, method, data) {
            return (await axios({
                method: method,
                url,
                data
            }).catch(e => {
                console.log(e);
            })).data;
        }
    }
}

 

 

#main.js 파일

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mixins from './mixins.js'

createApp(App).use(router).mixin(mixins).mount('#app')

 

 

#서버를 통해 axios 테스트 데이터를 받아오기 위해서 Postman Mock Server에 list api를 생성합니다.

 

-Postman 설치 방법
https://pingfanzhilu.tistory.com/entry/Postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8Postman-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95

[Postman] - 포스트맨(Postman) 다운로드 및 설치 방법

 

-Postman 목 서버 설치 방법

https://pingfanzhilu.tistory.com/entry/Postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EB%AA%A9-%EC%84%9C%EB%B2%84Postman-Mock-Server-%EC%83%9D%EC%84%B1-%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

[Postman] - 포스트맨 목 서버(Postman Mock Server) 생성 및 사용 방법

 

 

#list api에 JSON 형식의 example을 등록합니다.

[
    {"name":"김민수","age":"20","gender":"남","address":"서울"},
    {"name":"박민수","age":"25","gender":"남","address":"대구"},
    {"name":"최민수","age":"22","gender":"남","address":"서울"},
    {"name":"홍민수","age":"21","gender":"여","address":"부산"},
    {"name":"윤민수","age":"27","gender":"여","address":"서울"}
]

 

 

 

#이제 서버의 api가 준비되었으니 Vue 컴포넌트에서 Mock 서버로 api를 호출해서 데이터를 받아와서 리스트 렌더링 처리를 해보겠습니다.

 

-Vue.js 코드

1. Vue 라이프사이클 훅에 의해서 컴포넌트가 생성됩니다.
2. created() 함수가 실행되면서 getList() 함수를 호출합니다.
3. getList() 함수는 mock 서버에 생성되어 있는 list api를 호출합니다.
4. list api가 반환하는 리스트 데이터를 userList 객체에 받습니다.
5. list api로 받은 userList 객체를 v-for 디렉티브 반복문을 통해서 화면에 테이블 목록을 렌더링 합니다.

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>성별</th>
                    <th>사는곳</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="i" v-for="(user, i) in userList">
                    <td>{{ user.name }}</td>
                    <td>{{ user.age }}</td>
                    <td>{{ user.gender }}</td>
                    <td>{{ user.address }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userList: []
            };
        },
        created() {
            this.getList();
        },
        methods: {
            async getList() {
                this.userList = await this.$api("https://50bbf55d-be91-4b4d-9bf3-e13050218535.mock.pstmn.io/list", "get");
            }
        }
    }
</script>

<style scoped>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>

 

-Vue.js 리스트 데이터 렌더링 테스트