[VUE] Composition API - axios

Composition API에서 axios를 사용하는 기본적인 방법을 알아보겠습니다.

 

📌 ref, onMounted를 활용한 axios.get

<template>
    <h2>jsonplaceholder REST API axios.get</h2>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">Error : {{ error }}</p>
    <pre v-else>{{ data }}</pre>
</template>

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

    const data = ref(null);
    const loading = ref(true);
    const error = ref(null);
    
    async function fetchData() {
        try {
            const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
            data.value = response.data;
        } catch(err) {
            error.value = err.message;
        } finally {
            loading.value = false;
        }
    }

    onMounted(fetchData);
</script>

 

✅ 설명

• onMounted()에서 fetchData()를 호출하여 API 데이터를 가져옴
• ref()를 활용해 data, loading, error 상태를 관리
• axios.get(url)을 통해 비동기 요청을 실행
• try-catch-finally를 사용하여 오류 처리 및 로딩 상태 관리

✅ 결과

• axios 성공 여부에 따른 responMessage 호출

 

 

 

 

📌 ref 를 활용한 axios.post

<template>
    <h2>jsonplaceholder REST API axios.post</h2>
    <input v-model="title" placeholder="title" />
    <textarea v-model="body" placeholder="body"></textarea>
    <button @click="sendData">submit</button>
    <p>{{ responMessage }}</p>
</template>

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

    const title = ref('');
    const body = ref('');
    const responMessage = ref(null);
    
    async function sendData() {
        try {
            const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: title.value,
                body : body.value,
                userId : 1
            })
            responMessage.value = `Post created with ID: ${response.data.id}`;
        } catch (err) {
            responMessage.value = `Error: ${err.message}`;
        }
    }

</script>

 

✅ 설명

• v-model을 사용해 사용자 입력을 받아 axios.post() 실행
• 응답 메시지를 responseMessage에 저장

✅ 결과

• button submit 후 axios 성공 여부에 따른 responMessage 호출