5.HTTP 통신, Axios

• Axios 는 Ajax 와 같이 Vue 에서 제공하는 HTTP 통신 라이브러리 이다.
• Promise 기반의 API 형식이 제공되는 등 주어진 API 로도 충분히 원하는 로직을 작성 가능하다.

NPM

npm i -g axios --save

---

임포트

• 사용법은 Ajax 와 굉장히 유사하다.
• cli 로 다운로드 받아 package.json 에 추가했을 시에 import 시켜주면 된다.

<template>
  <div id="MainPage">
    {{MainPageGreeting}}
    <hr>
    <router-link to="/main/guide">GuidePage</router-link>
    <router-link to="/main/info">InfoPage</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
import Guide from "@/components/router/nested/Main/Guide";
import Info from "@/components/router/nested/Main/Info";
import Axios from 'axios'

export default {
  name: "MainPage",
  data(){
    return {MainPageGreeting:'Hello, This place is Main Page :)'}
  },
  comments: {Guide,Info},
  methods: {
    sendRequest() {
      // 해당 서버로 get 요청을 보내며 데이터를 정상적으로 받으면 then / 에러가 발생하면 catch 가 실행된다.
      Axios.get("http://localhost:8080/api/client/account/1")
            .then()
            .catch();
    }
  }
}
</script>

<style scoped>

</style>

 

---

러닝 가이드

 

xn--xy1bk56a.run/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%84%9C%EB%93%9C

API | Axios 러닝 가이드

 

• HTTP 별칭 메서드 와 설정 메서드 방법으로 나뉜다.
• HTTP 별칭 메서드도 config 인자를 받을 수 있다.

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

axios.request(config)
axios.head(url[, config])
axios.options(url[, config])


//Http 별칭 메서드

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})