Vue3에서 Composition API를 이용한 Axios 비동기 통신

Vue3에서 Composition API를 이용한 Axios 비동기 통신

 

 

 

Vue에서 권고하는 Promise 기반의 HTTP 라이브러리로서 웹 어플리케이션에서 서버와 HTTP 요청을 주고 받을 수 있다. 또 Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어왔을 때만 해당 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다. Axios 는 다음과 같은 기능을 제공한다.

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

 

지난 시간에 Vue에서 기본적인 Options API 문법으로 Axios를 이용한 비동기 통신을 하였다. 아래 링크를 참조하자.

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

• 샘플 프로젝트 생성

> vue create axios-test

 

 

• Axios 설치

> npm install axios
# 또는
> yarn add axios

 

 

• JSON 테스트용 데이터

Axios 테스트하기 위해 아래 사이트에서 제공하는 REST API를 통한 JSON 데이터를 가져온다.

JSONPlaceholder - Free Fake REST API

https://jsonplaceholder.typicode.com/todos/1

 

 

• App.vue

Composition API 문법으로 Axios 라이브러리를 사용하였다.

<template>
  <button @click="get">데이터 가져오기</button>
  <div>{{ data }}</div>
</template>

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

export default {
setup() {
    let data = ref([]);
    let id = ref(1);

    const get = () => {
      axios.get('https://jsonplaceholder.typicode.com/todos/' + id.value)
        .then((result) => {
          console.log(result.data);
          data.value.push(result.data);
          id.value++;
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("finally");
        });
    }
    return {
      data,
      get,
    };
  },
};

<style></style>

> npm run serve

위 코드는 data라는 배열에 '데이터 가져오기' 버튼을 클릭할 때마다 Axios 라이브러리를 이용하여 위 API를 호출해 데이터를 가져와 화면에 출력하는 샘플 소스코드이다. 

 

 

• Axios Docs

시작하기 | Axios Docs