[Vue+] Axios

Axios

Vue에서 권고하는 HTTP 통신 라이브러리로 Promise기반입니다. 또한 다른 HTTP 통신 라이브러리에 비해 문서화가 잘되어 있고 API가 다양합니다.

Axios 설치

npm insatll axios

Axios 사용방법

axios를 설치하고 나면 axios 변수에 접근할 수 있게 됩니다.

axios.get("GET 방식으로 요청할 URL")
	.then(res=> {
    	console.log(res);
    })
    .catch(error=>{
    	console.error(error);
    });

axios 객체를 통해 GET 통신을 수행하는 코드에 대해서 확인하게 되었습니다. 비동기 통신에 성공할 경우 then이 데이터를 받아 처리하게 되고 에러가 발생할 경우 catch를 통해 오류를 처리하게 됩니다.
(error 객체의 error.response.status - 응답 상태 코드 / error.response.headers - 응답 헤더 정보)

Axios HTTP Request Method

GET axios.get(url[, config])

URL에 정보가 기재되며 사용되는 HTTP 요청 방식이며 서버에서 데이터를 가져올 때 사용하는 메서드입니다. config에는 header, timeout(응답 초과시간), params(인자) 등의 요청을 넘길 수 있습니다.

axios.get("URL");

POST axios.post(url[, data[, config]])

서버에서 데이터를 생성할 때 사용하는 메서드입니다. post 함수의 두번째 파라미터에 생성할 데이터를 넘깁니다.

axios.post("/register", {
	name: "inho",
    age: "20",
});

PUT axios.put(url[, data[, config]])

특정 데이터를 수정할 때 요청하는 메서드입니다. PUT은 새로운 리소스를 생성하거나 이미 존재하는 데이터를 대체할 때 사용됩니다.
(POST와 PUT의 다른 점은 POST는 같은 요청을 여러번 할 경우 새로운 데이터가 지속적으로 생성되게 됩니다.(Insert), 하지만 PUT는 여러번 지속적으로 요청해도 결과값이 동일합니다.(Update))

axios.put("/user/64", {
	name: "KimInHo"
});

DELETE axios.delete(url[, config])

특정 데이터나 값을 삭제할 때 요청하는 메서드입니다.

axios.delete("/user/64");

axios HTTP 요청 Config

axios 요청을 할 때 config 설정을 할 수 있습니다.

axios({
	url: "요청할 서버 URL",
    methods: "요청에 사용할 메서드" /* get, post ...(기본값은 get)*/,
    baseURL: "Axios 인스턴스를 생성할 때 인스턴스의 기본 URL 값을 설정할 수 있는 속성" /* https://commit.com/api/ */,
    headrs: { "헤더 수정할 경우 사용"},
    params: {} /* HTTP 요청에 사용할 URL 파라미터(여기에 추가된 경우 URL 뒤에 추가되게 됩니다.)*/,
    data: {} /* HTTP 요청 Bodydㅔ 실어서 보낼 데이터(PUT, POST, DELETE, PATCH에서 주로 사용)*/,
    timeout: 숫자, /* millisecond로 HTTP 요청을 보내고 응답을 받기까지의 제한시간을 설정하는 속성입니다.(시간 초과시 에러 발생)*/
    responseType: 'JSON', /* 서버로부터 어떠한 데이터 형식으로 응답 받을지 설정(arraybuffer, document, json, text, stream) - 기본값은 json*/
});