axios 개념과 http method 종류

axios

• HTTP통신을 하는데 매우 인기있는 javascript 라이브러리
• 브라우저와 Node.js 플랫폼에서 모두 사용 가능
• IE8이상을 포함한 최신 브라우저 지원
• Promise를 기반으로하여 async/await 문법을 사용하여 XHR요청을 쉽게 가능

* Promise 란? 자바스크립트 비동기 처리에 사용되는 객체, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

* async & await 란? 자바스크립트의 비동기 처리 패턴 중 최근에 나온 문법, 콜백 함수와 프로미스 단점을 보완

* XHR(XMLHttpRequest) 이란? AJAX 요청을 생성하는 JavaScript API, 브라우저와 서버간의 네트워크 요청을 전송

 

장점

• 구형 브라우저 지원
• 요청 중단 가능
• response timeout을 쉽게 지정 가능
• CSRF 보호 기능이 내장
• upload progress 지원
• JSON 자동 변환

 

설치

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

2.NPM 방식
npm install axios

3.YARN 방식
yarn add axios

 

 

HTTP Methods

: 클라이언트가 웹 서버에게 사용자 요청의 목적/종류를 알리는 수단

 HTTP Method 중 Axios와 통신할 때 주로 사용하는 메서드 종류 ↓

• GET : 입력한 url에 존재하는 자원에 요청

 

axios.get(url,[,config])

GET은 서버에서 어떤 데이터를 가져와서 보여주는 용도, 값이나 상태등을 변경할 수 없음. ex) 로그인

 

 

• POST : 새로운 리소스를 생성(create)할 때 사용

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

POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달.

POST를 사용하면 주소창에 쿼리스트링이 남지 않기 때문에 GET보다 안전.

ex) 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할 때 사용

 

 

• DELETE : DB에 저장된 데이터를 삭제할 때 사용

axios.delete(url,[,config])

Delete 메서드는 서버에 있는 DB의 데이터를 삭제하는 것을 목적으로 하기 때문에 data 객체를 아예 전달하지 않음.

 

 

• PUT : DB에 저장되어 있는 데이터를 갱신할 때 사용
• PATCH : DB에 저장되어 있는 데이터를 갱신할 때 사용

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

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

put은 데이터 전체 수정, patch는 데이터 부분 수정임.