TIL50.Vue 서버통신

조연정·2020년 11월 25일
0
post-thumbnail

vue.js에서 서버통신을 위한 방법을 알아보자.

axious

React에서 서버통신을 위해서 fetch함수를 사용했었다면, vue에서 axious를 사용해보자. axios는 javascript용 플러그인으로 많이 사용하지만, Vue.js에서도 많이 사용된다.

axious와 fetch

둘다 return 값은 Promise객체 형태이다.

axious

  • 구형 브라우저를 지원한다.
  • 응답시간 초과를 설정하는 방법이 있다.
  • JSON데이터 자동변환이 가능하다.
  • node.js에서의 사용이 가능하다.
  • catch에 걸렸을 때, .then을 실행하지 않고, .console창에 해당 에러 로그를 보여준다.

fetch

  • 자바스크립트 내장 라이브러리이기 때문에 import하지 않고 사용할 수 있다.
  • 네트워크 에러가 발생했을 때 기다려야 한다. (reponse timeout API 제공 x)
  • 지원하지 않는 브라우저가 있다.

axious 사용법

  1. axious 설치하기
npm install --save axios
  1. axios는 REST 사용하기

불러오기 : axios.get(url[, config])
입력하기 : axios.post(url[, data[, config]])
수정하기 : axios.patch(url[, data[, config]])
삭제하기 : axios.delete(url[, config])

import axios from "axios";

export default {
    name: "MyComponent",
    created() {
        axios
            .get("/mock/data.json")
            .then(response => {
                this.data = response.data;
                console.log(response.data);
            })
            .catch(e => {
                console.log(e);
            });
    },
profile
Lv.1🌷

0개의 댓글