vue에서 axios 사용하기

현재 사용하고 있는 vue의 버전은 [ @vue/cli 5.0.8 ] 사용 중에 있습니다.

vue version 보시는 방법은 터미널을 여시고 [ vue --version ]을 치시면 나옵니다.

 

spring-boot와 vue를 같이 사용하여 프로젝트 하면서 server에 요청을 보내기 위해서 Axios를 사용해보려 합니다. 

프로젝트 내에서  npm i axios  를 통해 axios를 받아줍니다. 다 받아지면 package.json에 보시면 추가된것을 확인할 수 있습니다.

vue에서 사용하는 방법은 여러가지가 있겠지만 [ component내에서 import를 통해서 사용하거나, Vue전역 property에 vue의 property로 저장하여 사용하는법(이 때는 다른 property와 구별하기 위해 property name에 $ 붙이는것을 잊지말 것) ]

저는 vue의 provide와 inject를 통해 사용해 보도록 하겠습니다.

provide와 inject를 처음 들어보시는 분이시라면 링크를 참고해주세요

 

링크: https://vuejs.org/guide/components/provide-inject.html

Provide / Inject | Vue.js

 

먼저 vue instance를 생성하는 main.js에 들어갑니다.

import { createApp } from 'vue'

import App from './App.vue'
import router from "./router"
import store from "./store"

import TheHeader from "./components/layout/TheHeader.vue";
import TheFooter from "./components/layout/TheFooter.vue";
import axios from "axios";

const app = createApp(App);

app.component("the-header", TheHeader)
app.component("the-footer", TheFooter)

app.use(router);
app.use(store);

app.provide("axios", axios); // axios 추가

app.mount('#app');

provide로 key, value 값으로 axios를 추가해줍니다. 추가한 axios는 사용하려는 component 내에서 inject: ['axios'] 를 통해 주입받을 수 있습니다.

export default {
  name: "MemberRegistration",
  inject: ['axios'],
  data() {
    return {
      registerURL: '/rest/api/v1/member'
    }
  },
}

 

이제 axios를 사용하여 서버에 POST 요청을 보내보도록 하겠습니다. 간단하게 버튼을 클릭했을 때 임의로 작성한 axios post method가 실행되도록 하였습니다.

methods: {
    async save() {

      await this.axios.post(`${this.registerURL}/register`, {name: "mama2", "city": "c"}).catch(error => {
        console.log({error})
      });

      await this.axios.get(`${this.registerURL}/members`).then(response => {
        console.log({response});
      })
    }
  }

서버쪽 코드는 아래와 같습니다.

package jpaBook.jpaShop.controller;

import jpaBook.jpaShop.domain.Address;
import jpaBook.jpaShop.domain.Member;
import jpaBook.jpaShop.service.MemberService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;

@RestController
@RequestMapping("/rest/api/v1/member")
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    @PostMapping("/register")
    public void create(@Valid @RequestBody MemberForm form) {

        Address address = new Address(form.getCity(), form.getStreet(), form.getZipcode());

        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);

        memberService.join(member);
    }

    @GetMapping("/members")
    @ResponseBody
    public Member find() {

        return new Member();
    }
}

 

 

 

---

여기서 @RequestBody 와 @ResponseBody를 헷갈리지 않게 주의 하세요! 간단하게 

@RequestBody : 요청으로 들어오는 json 데이터를 어노테이션을 선언한 class에 매핑해줄 때

@ResponseBody : 요청에 대한 응답의 값으로 json을 주어야 할 때, 객체를 return하면 그에 맞는 json 데이터로 변환해준다. 

정도로 알고 있으면 혼동하여 사용할 일이 줄어들 겁니다.

---

이제 버튼을 클릭해서 요청을 보내보면~

spring-boot server

데이터 잘 들어온 것을 확인할 수 있습니다.

browser console

두 번째로 보낸 get 요청도 데이터가 잘 넘어온 것을 확인 할 수 있습니다.

 

---

해당 프로젝트에서는 provide와 inject를 통해 axios를 전역으로 사용했는데요, 어떠한 사이드 이펙트가 생길지는 아직 테스트 해보지 않아서 잘 모르겠습니다. 해당 사용방법이 잘못되었다면 댓글로 남겨주시면 감사하겠습니다!

 

출처: https://axios-http.com/kr/docs/intro