HTTP와 Axios

현재 진행중인 졸업과제에서는, vue.js를 프레임워크로 사용중이다.
즉, node.js를 기반으로 동작하는 프레임워크로 작업을 진행한다.

node.js에서는 서버로 Http 요청을 보내기 위해 여러가지 방법을 사용할 수 있는데,
그 중 나는 Axios라는 대중적인 라이브러리를 사용하기로 했다.
실제로 vue.js에서도 Axios를 권장하고 있다.

Axios란?

Promise API 기반의 비동기 HTTP 통신 라이브러리이다.
다른 라이브러리들에 비해서 훨씬 많은 API를 제공하는 라이브러리이다.

Promise요?

그럼 Axios 이전에 Promise 라는게 도대체 무슨 말인가?
Promise는 간단하게 말하면, 자바스크립트 비동기 처리에 사용되는 객체이다.
주로 서버에서 받아온 데이터를 화면에 표현하기 위해 사용되며,
아래와 같은 구조와 상태로 이루어져있다.

출처 : MDN

• Pending : 대기 상태, 비동기 처리 로직이 완료되지 않은 상태
• Fulfilled : 이행 상태, 비동기 처리 로직이 성공적으로 완료됨
  • 콜백 함수 인자인 resolve()를 호출해 해당 상태가 된다.
  • .then()을 통해서 가져온 데이터에 접근할 수 있다.
• Rejected : 실패 상태, 오류로 인해 비동기 처리에 실패한 상태
  • 콜백 함수 인자인 reject()르 호출해 해당 상태가 된다.
  • .catch()를 통해서 실패 사유를 출력할 수 있다.

Axios 또한 위와 같은 Promise 객체의 구조를 그대로 사용한다.

잠깐! 왜 Fetch가 아닌 Axios인가요?

Javascript에는 내장 Http 통신 라이브러리인 fetch가 존재한다.
그럼 왜 fetch를 사용하지 않고 Axios를 선택했을까?

• fetch의 장점
  • Javascript의 내장 라이브러리로 별도 설치가 필요없다.
  • 내장 라이브러리이기 때문에, 업데이트로 인한 에러를 걱정할 필요가 없다.
• Axios의 장점
  • 애초에 fetch를 개선하기 위해 등장한 라이브러리이다.
  • fetch와 동일하게 promise API를 사용한다.
    • Promise : .then(..).catch(..)와 같은 형태의 API
    • 응답 데이터를 다루기 쉽다는 말과 동일하다.
  • fetch와 다르게 네트워크 에러 발생 시 response timeout이 존재한다.
    • 네트워크 에러 핸들링을 직접할 수 있다는 말!
  • 다양한 브라우저와 호환이 가능하다.

Axios의 적용

위 사진은 현재 진행중인 졸업과제에 들어가는 회원가입 로직이다.
Axios를 사용해서 POST 요청을 보냈음을 볼 수 있으며,
.then()과 .catch()의 Promise 객체 형태가 사용됨을 알 수 있다.

.then(resp)에서 서버의 응답을 resp를 통해 접근할 수 있으며,
reject 됐을 때, 그 이유를 .catch(error)를 통해 확인한다.