1. Axios

: Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트

<aside> 💡 Promise 기반?

Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자이다. JS에서 비동기 처리에 사용되는 객체로 Callback지옥의 단점을 해결하기 위해 등장하였다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과가 아니라 미래의 어떤 시점에 결과를 제공하겠다는 프로미스(Promise)를 반환한다. Promise는 pending, fulfilled, rejected 중 하나의 상태를 가진다.

여기서 Promise 기반이라는말은, 비동기 작업을 처리하기 위해 Promise를 사용한다는 것을 의미하며 axios를 사용하여 데이터를 호출하면 Promise를 리턴한다는 것이다.

추가 정보 : 2. Promise

</aside>

동형이다. 즉, 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다.
서버(Node.js)에서는 http모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequest를 사용한다.

<aside> 💡 http?

: Node.js 내장 모듈로, 클라이언트 및 서버를 생성하는 기능을 제공한다.
- HTTP 통신을 위한 저수준 API를 제공하며, HTTP 요청을 보내고 응답을 받을 수 있다.
추가 정보 : 2. axios는 내부적으로 http/XMLHttpRequest을 어떻게 처리했을까?

</aside>

<aside> 💡 XMLHttpRequest?

: = XHR, 서버와통신을 하도록 하는 객체
- 서버와 상호작용할 때 사용한다.
- AJAX프로그래밍에 많이 사용된다. 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다.
  
  <aside> 💡
  
  AJAX?
  
  ; Asynchronous Javascript And XML, 비동기식 자바스크립트와 XML
  - 브라우저가 가진 XMLHttpRequest객체를 이용한 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
  - 비동기식으로 실행하기에 화면이 순간적으로 깜빡이는 현상이 없다. </aside>
<aside> ❓ Javascript는 싱글 스레드 언어이고 기본적으로 동기적으로 실행되는 걸로 아는데, XMLHttpRequest는 어떻게 비동기로 실행하는 걸까?

자바스크립트는 단독으로 실행되지 않는다. V8이라는 Javascript 엔진은 Node.js 환경에서는 Node.js에 탑재되어, 브라우저에서는 브라우저에 탑재되어 실행된다. Node.js환경에서는 Node.js API, 브라우저에서는 Web API를 활용할 수 있다. 이 때, 비동기 함수를 JS가 실행하게 되면 해당 환경에 위임하여 작업을 처리한다. 작업이 완료되면 Task Queue에 추가된다. 그리고, Event Loop는 Call Stack이 비었는 지 체크하여, 만약 비었다면 Callback 함수를 Call Stack에 넣어 처리하게 된다.

추가 내용 : Javascript에서 비동기 처리 방법 (Callback Queue, Event Loop, Promise, async-await, Libuv)

</aside>

</aside>
Promise API를 지원한다.

Axios의 기능

요청 및 응답 인터셉트 : axios.interceptor
요청 및 응답 데이터 변환 : axios.interceptor
요청 취소 : axios.cancelToken
JSON 데이터 자동 변환 : fetch처럼 응답 시 .json(), 요청 시 .stringify()을 하지 않아도 된다.
CSRF(= XSRF)를 막기 위한 클라이언트 사이드 지원

각 기능들

get요청

axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });

post요청

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });