Axios

• javascript에서 서버 통신을 위한 http 통신 라이브러리(vue만이 아니라 다른 js어플리케이션에도 이반적으로 사용된다)

1. 설치

npm install axios

2. 셋팅(main.js)

import axios from 'axios'

const app = createApp(App)

// axios를 전역 속성으로 추가
app.config.globalProperties.$axios = axios

app.use(router)
app.use(vuetify)

app.mount('#app')

3. Get(axios.get)

• 서버에 데이터를 불러오는걸 요청
• 첫 파라미터는 요청을 전달할 서버 url
• 두번째 파라미터는 config객체(선택

<script>
const HOST = "";

export default {
  methods: {
    getData() {
      this.$axios
        .get(HOST + "/api/getData")
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    },
  },
};
</script>

4. Post(axios.post)

• 서버에 데이터 입력
• 첫 파라미터에는 전달할 서버의 url
• 두번째 파라미터는 입력할 데이터
• 세번째 파라미터에 config 객체(선택)

<script>
const HOST = "";

export default {
  methods: {
    getData() {
      this.$axios
        .get(HOST + "/api/getData", {
          headers: { "X-AUTH-TOKEN": "인증 받음을 증명하는 토큰" },
        })
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    }
  },
};
</script>