[4주차] Axios

2월 12일 자 학습 내용 정리입니다.

 

 

✅ Axios

Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이다.
쉽게 말해 백엔드와 프론트엔드 간의 통신을 원활히 하기 위해 사용되는 것이다.
비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로(동기적으로) 처리되어야 하므로 코드의 순서를 신경써서 작성해야 한다.
따라서 이를 쉽게 하기 위해 Axios나 Ajax 등이 사용된다.

Ajax(Asynchronous JavaScript and XML)는 이름 그대로 비동기 자바스크립트라는 의미이다.
Ajax는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 화면 전체를 새로고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능하다.

Axios는 Ajax와 유사하며 API를 이용한 통신을 할 때 주로 사용한다.
비동기 통신 라이브러리이기 때문에 Promise를 기반으로 구현되었다.

 

✔️ Fetch vs Axios

fetch와 Axios는 둘 다 HTTP 요청을 처리하기 위한 자바스크립트 라이브러리이다.
둘의 차이점은 다음과 같다.

• fetch는 설치가 필요하지 않지만 axios는 설치가 필요하다.
  • fetch는 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다.
• fetch보다 axios의 호환성이 더 뛰어나다.
  • fetch는 옛날 버전의 인터넷 익스플로러에서 지원하지 않는 경우가 있다.
• axios는 fetch가 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 지원한다.

 

 

✅ Axios 사용법

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>

 

Axios에서의 CRUD는 다음과 같이 매칭된다.

• C (Create, 생성) : POST
• R (Read, 조회) : GET
• U (Update, 수정) : PUT
• D (Delete, 삭제) : DELETE

 

axios.post(url, data 객체)
axios.get(url)
axios.put(url, data 객체)
axios.delete(url)

 

Axios가 Promise를 사용하여 구현되었기 때문에 요청 후 응답은 .then() 메서드를 이용해 받을 수 있다.