Axios는 Node.js와 브라우저를 위한 Promise API를 활용한다.
비동기 HTTP 통신이 가능하고 return이 Promise 객체로 온다.
Fetch도 마찬가지로 Promise 기반이다.
그렇다면!! Promise가 무엇인가?
Promise 객체란?
어떤 작업에 관한 상태 정보를 갖고 있는 객체를 말함
-> 결과가 promise에 저장되기 때문에 작업이 성공했는지 알 수 있음
Promise 3가지 상태
- fulfilled 상태(성공): 작업이 성공적으로 완료했음을 의미 -> promise객체는 성공 결과도 함께 가짐
- rejected 상태(실패): 작업이 실패했음을 의미 -> promise객체는 실패 이유에 관한 정보도 함께 가짐
- pending 상태(진행중): 작업이 진행 중임을 의미
pending 상태에서 한번 성공이나 실패 상태가 되면 다시 다른 상태를 가질 수 없음
Promise 핸들러
- then: promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메서드
- catch: promise 객체가 rejected 상태가 되면 실행할 콜백함수를 등록하는 메서드
- finally: 어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록하는 메서드
사용 이유
- 비동기 작업을 순차적으로 실행하기 위해 사용
- callback 함수를 보기 좋게 하기 위해 사용
- callback 함수가 많아지면 콜백 지옥에 빠져 가독성이 매우 낮아짐
- 여러 개의 비동기 작업을 순차적으로 수행할때, 콜백 함수가 중첩되어 코드의 깊이가 깊어지는데 이러한 현상을 콜백 지옥이라고 함
비동기적 처리가 가능하게 바꿔주는 문법이 아닌, callback함수를 대신해 보기 좋게 만들어주는 것임
참고 자료
https://velog.io/@minew1995/JavaScript-Promise-%EA%B0%9D%EC%B2%B4
어서와