편리한 바디 데이터 변환
fetch() 는 JSON 데이터를 리퀘스트 바디로 보낼 때 직접 JSON.stringify() 를 사용해 데이터를 변환해서 보내야 합니다. 하지만 axios는 이런 과정을 자동으로 해 줍니다.
또한 리스폰스로 받은 바디를 처리할 때도 fetch()는 응답을 받은 후에 .json() 를 호출하여 데이터를 JSON 형식으로 명시적으로 변환해야 합니다. 반면, axios를 사용하면 응답 데이터가 자동으로 JSON으로 변환되어 있기 때문에 추가적인 메서드 호출 없이 response.data 를 사용해 바로 데이터를 처리할 수 있게 해줍니다.
쿼리 문자열 처리
fetch() 를 사용할 때에는 URL을 문자열로 작성하고 쿼리 문자열을 직접 ?key=value 형태로 변환한 다음 URL 문자열 뒤에 붙여서 써야 합니다. 하지만 axios에서는 axios.get(url, { params: { key: value } }) 와 같이 객체 형태로 편리하게 사용할 수 있습니다.
HTTP 에러 처리
fetch()는 HTTP 리스폰스의 상태 코드가 4xx 또는 5xx로 오더라도 오류로 처리하지 않습니다. fetch() 가 리턴하는 Promise가 rejected 상태가 되는 경우는 네트워크를 보내는 도중에 발생하는 예기치 못한 상황 뿐이고, 서버에서 보내주는 4xx, 5xx 상태코드는 rejected로 처리하지 않습니다. 그래서 response.ok 값이나 response.status를 직접 확인해서 서버에서 보내준 상태 코드에 맞게 로직을 구현해야 합니다.
반면에 axios가 리턴하는 Promise는 HTTP 리스폰스의 상태코드가 4xx 또는 5xx로 오면 rejected 상태로 처리합니다. 서버에서 보내 준 에러와 예기치 못한 상황을 try/catch 안에서 한 번에 처리할 수 있습니다.
Axios 인스턴스
API 리퀘스트를 보낼 때, 예를 들어서 https://example.com/api 같이 공통된 주소 Base URL이라고 합니다. 설정과 같이 자주 사용하는 설정 값을 axios 인스턴스로 만들어서 공통적으로 설정해 둘 수 있습니다. 이것 외에도 Interceptor와 같은 기능을 사용해서 반복되는 코드를 줄일 수 있습니다
