[Vue.js] 뷰 HTTP 통신 - Axios란

💻 웹 앱의 HTTP 통신 방법

사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문에 HTTP통신은 필수로 구현해야 하는 기능이다.

HTTP는 브라우저와 서버간에 데이터를 주고받는 통신 프로토콜이다.
브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작한다.

💻 Axios란?

뷰에서 권고하는 HTTP 통신 라이브러리는 Axios이며, Promise기반의 HTTP통신 라이브러리이다.

📍 Axios 설치방법

1. CDN방식

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. NPM 방식

npm install axios

📍 HTTP GET 요청

axios.get('url 주소').then().catch();

• 해당 URL 주소에 대한 HTTP GET 요청을 보낸다.
  서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직 실행,
  데이터를 받아 올때 오류 발생시 catch()에 정의한 로직 수행

📍HTTP POST 요청

axios.post('url 주소').then().catch();

• 해당 URL 주소에 대한 HTTP POST 요청을 보낸다.
  GET 요청과 동작은 동일하다.

📍HTTP 요청에 대한 옵션 속성 정리

axios({
	method : 'get',
    	url : 'URL 주소',
        ...
     });

• HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다.