Axios API 사용하기

1. Axios란 ?

  Axios API   : 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리. Promise 객체를 기반으로 만들어짐.

Ajax 처럼 API를 이용한 비동기 통신을 할 때 주로 사용한다.

•   Ajax   ( 비동기 자바스크립트 ) : 브라우저의 XMLHttpRequest객체를 이용하여 화면 전체를 새로고침하지 않고 일부 변경된 데이터만 로드하는 비동기 처리.

React에서 OpenAPI를 이용할 때 Axios를 주로 사용한다.

 

Fetch와 Axios의 차이점

•   Fetch API   : HTTP 요청을 처리하기 위한 라이브러리.

① Fetch는 내장함수이고 Axios는 설치해야한다.② Axios의 브라우저 호환성이 더 좋다.③ Axios는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 더 지원한다.

---

2. API란 ?

= Application Programming Interface다양한 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.여기서 인터페이스는 프로그램과 프로그램을 연결해 주는 다리 역할을 하는 것을 의미한다.

 

3. HTTP란 ?

= HyperText Transfer Protocol

• HyperText : 링크 주소를 참조하는 문서로 전자기기에 있는 데이터
• Transfer : 전달
• Protocol : 규약, 규칙

사용자는 URL을 입력한다. 브라우저는 해당 데이터를 서버에 요청(Request)하고, 서버는 요청에 응답(Response)해 데이터를 브라우저에 가져온다. 브라우저가 받아온 데이터를 화면에 보여준다.

• HTTP Request :  클라이언트의 요청
• HTTP Response : 서버의 응답

즉, 클라이언트의 요청에 서버가 응답하는 방식, 세부적인 방법을 규약으로 정해놓은 것을 HTTP 라고 한다. 

HTTP에는 Methods 와 Status code 등이 있다.

 

4. Axios와 CRUD

CRUD = Create Read Update Delete, 기본적인 데이터 조작 방식

CRUD와 HTTP Method 매치

• Create 생성 - POST
• Read 조회 - GET
• Update 수정 - PUT
• Delete 삭제 - DELETE

 

Axios 사용법

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

POST

axios.post(url, data 객체)

then( ) 으로 post가 성공했을 때 response객체를 받아와서 data 를 추출한다.

response객체에는 status 정보와 data 정보등이 있다.

axios.post(url, data 객체)

.then( response => {

    if (response.status == 200){
        console.log(response.data)
}})

GET

axios.get(url)

post처럼 get도 url을 넣고, 결과를 then( ) 으로 받아와서 데이터를 추출한다.

PUT

axios.put(url, data 객체)

 

DELETE

axios.delete(url)