AXIOS

목차
1. AXIOS란
2. 사용법
3. FetchAPI가 이미 있는데?
4. 주의점

 

1. AXIOS란

• HTTP 요청 작업을 promise기반으로 처리하는 자바스트립트의 라이브러리

form의 submit, xhr, fetchAPI 등 클라이언트가 서버에 요청을 하는 방법이 몇가지가 있다. 그 중 현재 가장 많이 사용하는 방법 중 하나가 axios를 이용하는 것이다. axios는  여러 장점으로 인해  현재 가장 많이 사용되고 있다. 그렇다면 왜 많이 사용되는지, 그리고 어떻게 사용하는지 확인해보자.

 

2. 사용법

먼저 axios는 외부 라이브러리기 때문에 node에서 사용하는 경우 npm으로 설치를 해야하고 html에서 사용할 경우 cdn 또는 lib경로에 파일을 추가하여 사용하여야 한다.

npm

npm install axios

cdn(Content Delivery Network)방식

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

 

사용 방법은 fetchAPI와 비슷하다. 다만 axios의 경우 get,post 같은 HTTP요청 메서드를 객체의 메서드 형태로 지원하고 있으며 첫번째 인자에 요청할 서버의 주소가 필요하고 데이터를 저장 및 수정하는 post와 put의 경우에 두번째 인자값으로 전달할 데이터를 지정해준다.  

axios.메서드("요청URL",body,옵션);

ex)
axios.get("http://test.com");

axios.post("http://test.com",{name:"홍길동"},{headers:{"content-type":"application/json"}})

이때 필요할 경우 header나 withCredentials같은 옵션을 추가해줄 수 있다.

옵션

headers	요청에 대한 전반적인 내용으로 본문의 타입, 동일 출처 여부, 인증을 위한 barer token 등이 여기에 포함
withCredentials	자격증명(cookie,session등)을 요청에 포함하기 위한 옵션
timeout	요청 후 응답을 받기까지 기다리는 시간으로 설정된 시간이 지나도 응답이 오지 않으면 통신이 안된다고 간주한다.
params	url에도 포함될 수 있는 param을 객체 형태로 지정하여 보낼 수 있다.
responseType	응답받을 데이터의 타입을 지정하며 기본 타입은 json
maxContentLength	응답받는 데이터의 크기를 지정하며 크기를 넘어가면 에러로 간주한다.

위의 옵션들은 필수로 설정하는 것이 아닌 필요할 경우 추가하여 사용하면 된다.

3. FetchAPI가 이미 있는데?

비동기 통신 방식으로는 이미 FetchAPI가 있다. 하지만 CDN방식이나 설치를 해서 사용해야하는 외부 라이브러리인 axios를 더 많이 사용할까? 답은 간단하다.

더 편하니까...

axios가 왜 더 나은지 FetchAPI와 비교보자.

axios	fetch
자동 JSON처리	매번 response.json()을 호출
기본 timeout지원	수동으로 timeout지정
HTTP메서드를 클래스의 메서드 형태로 지원하여 직관적	HTTP메서드를 객체형식으로 옵션을 작성

* axios는 기본적으로 자동으로 json을 처리하지만 버전업이 되면서 데이터에 따라 헤더의 'content-type'의 값을 자동으로 지정하게 되었다. 

4.주의점

1) 자격증명을 포함하는 방법

클라이언트가 가지고 있는 쿠키정보를 서버에도 사용하려면 요청 객체에 포함시켜야 한다. 그러나 옵션을 따로 지정하지 않으면 쿠키는 요청에 포함되지 않는다.

• withCredentials : 자격증명을 요청에 포함할지 여부, true와 false로 값을 지정한다.

axios.post("http://test.com",{},{
    withCredentials:true
})

 

2) Get요청에는 body에 데이터를 포함시키지 않는다.

보통 get요청은 클라이언트가 조회할 정보를 서버측에 요청하므로 여러 데이터를 넘기거나 보안에 관련된 정보가 포함되지 않는다. 따라서 body보다는 쿼리 스트링이나 파라미터 형태로 데이터가 전송이 되기 때문에 따로 body에 담길 데이터를 지정하지 않는다.

axios.get("http://test.com/1",{
    headers:{
        'content-type':'application/json'
    }
})

 

3) Delete요청의 body에 데이터를 포함 포함시킬 때

get을 제외한 다른 메서드들은 body에 데이터가 담길 때 데이터가 담긴 객체의 키가 data로 지정되어 서버로 넘어가게 된다. 하지만 Post, Put은 객체의 형태로만 지정하면 body에 데이터가 포함되지만 delete만이 data라는 키를 통해 서버에 전송될 데이터를 넘겨야한다.

axios.delete("http://test.com",{
    data:{
        name:'홍길동'
    }
})

 

참고자료

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs