Vue axios

Axios 가 무엇인가

브라우저에서 지원하는 비동기 통신 라이브러리이다.
자바스크립트 런타임 환경에서는 동기 처리방식이 사용된다. 때문에 비동기 처리방식을 사용하고 싶다면 axios, promise, callback 함수 등을 사용해야 한다고 알고 있다. 비동기 처리 방식을 사용하는 Axios를 Vue에서는 어떻게 사용할까?

fetch vs axios

기존 위코드에서 프로젝트를 진행할때 나는 fetch함수를 사용해서 통신했었다. 그 때 뭔 차이인지 몰라서 물어봣을땐 그냥 회사에서 쓰는거 쓰시면 된다는 멘토의 말이 기억났다..ㅎ 이유는 모르겟고 그냥 쓰라고 하셧던....

지금 알아보니 진짜 큰 차이는 없다. 둘 다 비동기 통신 라이브러리로, Fetch는 브라우저 내장 함수이다. 반면 Axios는 서드파티 라이브러리로, npm ,yarn 등으로 설치해야 사용할 수 있다.

Axios 기본 형태
axios.get("url주소", {구성})
axios.post("url주소", {data})
axios.delete("url주소")
axios.put("url주소", {data})

get 예시

import axios from 'axios';

axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
    console.log(Response.data);
}).catch((Error)=>{
    console.log(Error);
})

Post 예시

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

문법은 fetch랑 크게 다를게 없어보인다...

알아보니 fetch는 속도는 axios보다 살짝 빠르지만 지원하는 브라우저가 정해져있다. 따라서 장단점이라고 할것도 없이 그냥 아무거나 원하는 상황에 따라 사용해도 무방할 듯하다.