[React] Node JS를 위한 비동기 통신 AXIOS

Node JS를 위한 비동기 통신 라이브러리
AXIOS

 

 

Axios란?

 

: Promise 기반 HTTP 클라이언트 라이브러리(비동기 통신 라이브러리)

: Javascript, Node JS 환경에서 요청 응답 처리에 사용

: 내장 클래스가 존재하지 않아 XML Request 객체를 이용하거나 다른 HTTP Client를 사용

 

* 백엔드/프론트엔드 통신을 쉽게 하기 위해 Ajax를 더불어 사용하기도 함

https://kcode-recording.tistory.com/334

[JavaScript] JS의 라이브러리 AJAX

 

---

 

어떻게 사용할 수 있을까?

 

 

1. 다운로드

npm install --save axios

 

- 위 명령어를 통해 설치 후 임폴트하여 사용이 가능하다.

 

 

2. 사용 방법

 

- HTTP 클라이언트 라이브러리로 HTTP METHOD를 사용하게 되는데,

이중 기장 많이 사용하는 것은 GET/POST/PUT/DELETED이다.

 

axios.method(url).then().catch() // 보낼 데이터가 없는 경우
axios.method(url, data).then().catch() // 보낼 데이터가 있는 경우

 

- 데이터를 함께 보내는지(ex. Post), 아닌지(ex. Get)에 따라 데이터 포함 여부만 다를 뿐 기본적인 틀은 동일하다.

* 물론 데이터를 만약 path에 포함시켜도 되는 것이라면 url에 데이터를 함께 담아서 보내는 것도 가능하다.

 

- 각 기능에 다라서 메서드를 다르게 사용해야 하는데, 그 이유는 각 메서드 별의 기능을 살펴본 다음에 이야기 해 볼 예정이다.

 

1) GET

: 입력한 url에 존재하는 자원에 요청을 진행

: GET은 서버에서 어떤 데이터를 가져와서 보여주는 용도로 사용하며, 주소에 있는 쿼리를 이용해 정보를 전달할 뿐 값이나 상태 변경은 불가능함

 

2. POST

: 새로운 리소스를 생성

: 보낼 데이터를 입력해서 전송해야 하며, GET과 달리 주소창에 쿼리가 남지 않아 GET보다 안전

 

3. Delete

: REST 기반 API 프로그램에서 DB에 저장되어 있는 내용을 삭제하는 목적으로 사용

: form 태그에서 지원하는 메서드가 아니며, 삭제를 주 목적으로 하여 데이터로서 객체를 전달하지 않음

 

4. PUT

: REST 기반 API 프로그램에서 DB에 저장되어 있는 내용을 변경(갱신)하는 목적으로 사용

: form 태그에서 지원하는 메서드가 아니며, DB 내용을 변경하는 것을 주 목적으로 함