비동기 통신 라이브러리 Axios

yunji_kim·2023년 3월 30일
0

JavaScript

목록 보기
8/9

Axios란?

  • Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것이다. 비동기 통신 라이브러리를 사용하지 않으면 모든 코드의 순서를 신경 써서 작성해야 하기 때문에 코드 작성이 매우 복잡해진다. 따라서 비동기 통신(API를 이용한 통신)을 쉽게 해주는 Axios나 Ajax 같은 것이 자주 사용된다.
  • Axios는 **Promise를 기반으로 만들어진 라이브러리이다.**
  • index.html에 아래 두 스크립트를 추가해주면 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>
💡 **Ajax란?** Ajax란 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자입니다. Ajax는 브라우저가 가지고 있는 [XMLHttpRequest](https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest) 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능합니다.

Fetch vs Axios

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

Fetch

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

Axios

  1. 간단하지만 설치 과정이 필요하다.

  2. Fetch보다 브라우저 호환성이 뛰어나다.

  3. JSON 자동 변환, 응답 시간 초과 설정 기능 등을 지원해준다.

    axios는 외부 모듈로 따로 패키지 설치를 해줘야 사용할 수 있으니, 여의치 않다면 fetch를 사용해도 상관 없다. 자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택하자.

profile
| FE Developer | 기록의 힘 |

0개의 댓글