AXIOS가 뭐하는 녀석인지? - 비동기 통신, Promise, Ajax, HTTP,

서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

 

axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용합니다.
• Promise(ES6) API 사용합니다.
• 요청과 응답 데이터를 변형합니다.
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경
• 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.
• 서버는 요청을 처리하고 response라고 불리는 응답을 제공합니다.
• https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

---

HTTP 클라이언트

HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다.

Axios 는 node.js와 브라우저를 위한 Promise API을 사용하는 HTTP 클라이언트 입니다.

TP는 사용자가 URL을 요청할 때에만 이라는 전재가 붙습니다.

(사용자는 서버로부터 새로운 정보를 받아보기 위해서, 반드시, 새로운 URL을 요청해야 한다는 말과 같습니다.)

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

HTTP 개요 - HTTP | MDN

---

XMLHttpRequests

페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web API | MDN

---

 

API,  HTTP API,  REST API  차이

HTTP를 좀더 잘쓰기위한 REST API 규약

https://bentist.tistory.com/37

API, HTTP API, REST API 차이

---

Promise란 ?  

콜백의 네스팅(함수중첩)을 보장

https://poiemaweb.com/es6-promise

Promise | PoiemaWeb

---

 

Ajax 란?

효과적으로 서버와 소통하기 위한 기술입니다.

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다.

http://www.tcpschool.com/ajax/ajax_intro_basic

코딩교육 티씨피스쿨

---

 

axios vs fetch

axios	fetch
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

위와 같은 표를 보았을 때 axios는 별도의 설치가 필요하다는 단점이 있지만 그것을 커버할 만한 fetch 보다 많은 기능 지원과 문법이 조금이나마 간소화 된다는 장점이 있다는 것을 볼 수 있다.

따라서, 간단하게 사용할때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 땐 axios를 쓰면 좋다고 보면 된다.

 

 

 

 

 

참고: 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9#top