02 Axios API

• Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것.
• Axios는 Ajax와 유사하며 API를 이용한 통신을 할 때 주로 사용합니다.
• Axios는 Promise를 기반으로 만들어진 라이브러리이다. Promise는 자바스크립트 ES6에서 비동기 처리를 위해 주로 사용되는 객체입니다.

Fetch vs Axios

Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리이지만 몇 가지 차이점이 존재한다.

1. Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다. 하지만 Axios의 경우 별도의 설치 과정이 필요합니다.
2. Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 Fetch보다 브라우저 호환성이 뛰어나다.
   Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다.

Axios가 더 좋아보이지만 axios는 외부 모듈로 따로 패키지 설치를 해줘야 사용할 수 있으니, 여의치 않다면 fetch를 사용해도 상관 없다.

API

API는 Application Programming Interface의 줄임말로 다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말한다.

Axios 사용법

axios 라이브러리를 사용하기 위해서는 index.html에 스크립트를 추가 해야한다.

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

CREATE: POST

axios.post(url, data 객체)

const data =  { "vehicle": "car", "people": 4 } ;
axios.post('https://example.com', data)
    .then(res => {
    	console.log(res);
    	body.innerHTML = res.data;
    
    });

READ: GET

axios.get(url)

axios.get('https://example.com')
    .then(res => {
        console.log(res.data.data);
    });

UPDATE: PUT

axios.put(url, data 객체)

const data = { "vehicle": "bus", "people": 10 };
axios.put('https://example.com', data)
    .then(res => {
        console.log(res.data);
    });

DELETE: DELETE

axios.delete(url)

axios.delete('https://example.com')
	.then(res => body.innerHTML = res.status);
}