[JS] Axios

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.

브라우저 호환성

https://velog.io/@3000

Axios 특징

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

HTTP란?
HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 

Axios GET방식

GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도입니다. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없습니다.

axios.get(url,[,config])

// ex
import axios from 'axios';

axios.get('https://member/memberId/id001').then((Response)=>{
    console.log(Response.data);
}).catch((Error)=>{
    console.log(Error);
})

아래와 같은 json형태로 가져옵니다.

[
  { memberId: 'id001', memberPw: 'pw001', memberName: 'name1' },
  { memberId: 'id002', memberPw: 'pw002', memberName: 'name2' },
  { memberId: 'id003', memberPw: 'pw003', memberName: 'name3' }
]

Axios POST방식

post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달합니다. 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용합니다. Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전합니다.

axios.post("url주소",{
    	data객체
    },[,config])
    
// ex
 axios({
    method:"POST",
    url: 'https://member/login',
    data:{
        "memberId": memberId.value,
        "memberPw": memberPw.value
    }
}).then((res)=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
    throw new Error(error);
});

Axios DELETE방식

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.

axios.delete(URL,[,config]);

//ex
axios.delete("/memberList").then(function(response){
    console.log(response);
}).catch(function(ex){
    throw new Error(ex)
}

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않습니다.

Axios PUT방식

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용됩니다.

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

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있습니다.

 

※ PUT 메소드와 DELETE 메소드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아닙니다.

---

Axios vs Fetch

Axios	Fetch
요청 객체에 url이 있다.	요청 객체에 url이 없다.
써드파티 라이브러리로 설치가 필요하다.	현대 브라우저에 빌트인이라 설치 필요 없다.
XSRF 보호를 해준다.	별도 보호가 없다.
data 속성을 사용한다.	body 속성을 사용한다.
data는 object를 포함한다.	body는 문자열화 되어있다.
status가 200이고 statusText가 ‘OK’이면 성공이다.	응답객체가 ok 속성을 포함하면 성공이다.
자동으로 JSON데이터 형식으로 변환된다.	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않는다.
HTTP 요청을 가로챌수 있음	기본적으로 제공 하지않는다.
download진행에 대해 기본적인 지원을 한다.	지원하지 않는다.
좀 더 많은 브라우저에 지원된다.	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원한다.

따라서 axios는 별도의 설치가 필요하다는 단점이 있지만 그것을 커버할 만한 fetch 보다 많은 기능 지원과 문법이 조금이나마 간소화 된다는 장점이 있다는 것을 볼 수 있습니다. 

→ 간소한 기능 시용시 fetch, 확장성을 염두할 시 axios