Vue의 공식 Http 통신 라이브러리-Axios

devjune·2021년 6월 16일

Vue.js

목록 보기

4/36

이번 포스팅에서는 Vue에서 공식적으로 지정한 HTTP 통신 라이브러리 Axios에 대해 다루려고 한다.

사실 axios가 공식 라이브러리로 지정 되기 전, vue-resource가 공식 라이브러리였다.
axios가 출시된 후 수많은 업데이트와 안정성이 검토된 후 Evan You가 axios로 변경하기로 했다.

브라우저 호환성

axios는 현재까지도 수정이 계속 진행되고 있으며, 예제와 각 Browser에 휼륭히 지원되고 있다.

사용방법

axios를 이용하려면 cdn 방식을 이용하거나, node를 이용하여 package를 설치해야 한다.

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

//or

npm install axios

import axios from 'axios'

axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

Http Methods에 따른 Vue 별칭

Http Methods 중 가장 많이 사용되는 4가지를 정리하였다.

GET

형태

axios.get(url, [config])

GET은 요청받은 URI의 정보를 검색하여 응답한다. GET메서드는 값이나 상태등을 바꿀 수 없다.

예제

import axios from 'axios';

axios.get('https://www.devjune.com/users')
	.then(res => {
            console.log(res.data);
	}).catch(err => {
            console.log(err);
	})

POST

형태

axios.post("url",{data}, [config])

POST는 새로운 리소스를 생성(create)할 때 사용한다.

예제

import axios from 'axios';

axios.post('https://www.devjune.com/users', {id: 'june', pw: '1234'})
	.then(res => {
            console.log(res.data);
	}).catch(err => {
            console.log(err);
	})

PUT

형태

axios.put("url",{data}, [config])

PUT는 리소스를 갱신(update)할 때 사용한다.

예제

import axios from 'axios';

axios.put('https://www.devjune.com/users', {pw: '5678'})
	.then(res => {
            console.log(res.data);
	}).catch(err => {
            console.log(err);
	})

DELETE

형태

axios.delete("url", [config])

DELETE는 리소스를 삭제(delete)할 때 사용한다.

예제

import axios from 'axios';

axios.delete('https://www.devjune.com/users/1')
	.then(res => {
            console.log(res.data);
	}).catch(err => {
            console.log(err);
	})

출처 인프런 Vue.js 시작하기 - Age of Vue.js