Vue Http Request (XMLHttpRequest)

<template>
    <div class="home">
        <div>Board List:
            <div v-if="loading">loading ... </div>
            <div v-else> Api result : {{apiRes}}</div>
        </div>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                loading: false,
                apiRes: ''
            }
        },


        created(){
            this.fetchData()
        },

        methods: {
            fetchData(){
                this.loading = true

                console.log(this.loading);
                const req = new XMLHttpRequest()

                req.open('GET', 'http://ip 주소:3000/health')

                // 요청
                req.send()

                req.addEventListener('load', () => {

                    this.loading = false
                    console.log(this.loading);
                    this.apiRes = {
                        status: req.status,
                        statusText: req.statusText,
                        response: JSON.parse(req.response)
                    }
                    // console.log(this.apiRes);

                })
            }

        }


    }
</script>