본문 바로가기
WebDev/항해99

WIL axios

by S.AHA_dev 2023. 7. 16.
728x90
반응형

Axios

Promise 기반 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 모두에서 사용할 수 있음.

Axios는 간편한 API를 제공하므로, HTTP 요청 및 응답 데이터를 쉽게 처리할 수 있음

Axios는 자주 사용되는 HTTP 메소드( GET, POST, PUT, DELETE 등)를 지원,

요청 시 설정할 수 있는 다양한 옵션과 함께 요청을 보낼 수 있음

Axios는 기본적으로 Promise를 반환하며, then()을 사용하여 비동기 요청을 처리할 수 있음.

또한, async/await 패턴을 사용하여 응답 데이터를 동기적으로 처리할 수 있습니다.

Axios는 예외 처리와 요청 취소 등의 기능도 제공합니다.

또한, 인터셉터를 사용하여 요청 및 응답 데이터를 중간에 가로채 서드파티 라이브러리와 통합가능

Axios는 다양한 환경(브라우저, 웹 앱, 서버 등)에서 사용할 수 있으며,

간단하고 직관적인 API를 제공.

 

fetch와의 차이점

Axios와 Fetch는 모두 브라우저에서 네트워크 요청할 때 사용.

 

API의 직관적 이해도: Axios는 API가 더 직관적

request-config와 response-config를 모두 다룰 수 있게 함

Fetch API는 이와 달리 상위 수준의 interface를 제공하지 않고 Http response 객체만 반환

 

단축 구문: Axios는 HTTP 요청을 보낼때 GET, POST, PUT, DELETE 같은

다양한 메소드를 작성하는데 용이한 에일리어스(alias)를 제공하지만

Fetch API는 POST에서 양식 데이터를 처리하는 경우 body 속성을 직접 지정

 

Request/Response Interceptor Support: Axios는 request와 response의 네트워크 인터셉터 지원을 제공합니다.

Fetch API는 이와 같은 인터셉터를 제공하지 않음

 

브라우저 vs Node.js 지원: Axios는 브라우저 및 Node.js에서 모두 지원함

Fetch API는 브라우저에 탑재

Node.js에서는 비공식적으로 사용할 수 있지만 추가 모듈 설치 필요

 

배포 크기: Axios는 구형 브라우저 및 Node에서 사용하는 디펜던시에 따라 대략적으로 67KB 정도의 용량임

Fetch API는 대략적으로 10KB 정도의 용량이며, 별도의 디펜던시 없이 사용 가능

결론적으로 Axios는 API 사용성과 인터셉터 지원으로 인해 많이 사용

 
 
반응형

'WebDev > 항해99' 카테고리의 다른 글

2023 7.24 클론 코딩 프로그래스 바  (0) 2023.07.25
웹미니 프로젝트 회고  (0) 2023.07.23
FE, BE 웹 미니 프로젝트 SA 작성  (0) 2023.07.14
리액트쿼리, 리덕스  (0) 2023.07.11
라이프사이클, react hooks  (0) 2023.07.09