WIL 10 -항해99 5주차 (22.12.18)

Axios

액시오스(Axios)는 리액트나 뷰 등의 JS 라이브러리, 프레임워크 등에서 널리 사용되는 Promise 기반의 비동기 HTTP 통신 라이브러리이다. 다른 HTTP 통신 라이브러리와 비교 시 문서화가 잘되어 있고 API 다양하다.


👍 액시오스의 장점
1. response timeout 처리방법으로 에러 핸들링에 장점이 있다.
2. Promise 기반으로 만들어졌기 때문에 response 데이터를 다룰 때 장점이 있다.
3. 크로스 브라우징이 최적화되어 구버전의 브라우저 호환성이 뛰어나다.

액시오스는 다양한 장점이 존재하지만 사용하기 위해 별도 모듈을 설치해야하는 번거로운 점이 존재한다.

---

• 액시오스 응답 제어

1. .then
   비동기 통신이 성공했을 경우 .then() 콜백을 인자로 받아서 결과 값을 처리할 수 있다.
2. .catch
   오류를 처리할 때 사용하며 error 객체에서는 오류에 대한 정보를 확인할 수 있다.

axios.get('/login')
    .catch(function (error) {
        if (error.response) {
            console.log(error.response.status);
            console.log(error.response.headers);
        }
    }
 

• 액시오스 요청의 기본 문법
  axios.post(url[, data[, config]])

axios.post('/movies', { title: '1917' })

• 액시오스의 timeout config 옵션
  액시오스는 timeout 옵션을 사용해서 http 요청 후 제한 시간까지 응답을 받지 못하면 에러를 발생하는 기능을 제공한다.

---

비교되는 http requests 방법으로는 자바스크립트에 내장되어 있는 Fetch가 있다. Fetch는 ES6 이후부터 자바스크립트에 내장된 라이브러리로 Promise 기반으로 만들어졌기 때문에 액시오스와 마찬가지로 response 데이터를 다루기 쉽다.

👍 fetch의 장점
1. 자바스크립트 내장 라이브러리로 별도의 설치나 import가 필요없다.
2. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 응답 data 다루기가 편리하다.

fetch는 액시오스에 비해 단점이 여러 존재하는 편이다.
1. 지원하지 않는 브라우저가 존재한다. (IE 11)
2. 네트워크 에러 발생 시 response timeout이 없어서 기다려야 한다.
3. JSON으로 변환해주는 과정이 필요하다.

---

구형 브라우저를 지원하는 호환성 부가기능의 다양성 등 fetch에 비해 Axios는 사용상 분명한 장점이 존재한다.

별도로 라이브러리 모듈을 설치해야하는 번거로움이 있지만 써드파티 패키지로 간편하게 설치가 가능한만큼 큰 단점은 아니라고 생각한다.