async, awiat을 통해서 Promise객체를 return한다고 했다. 그에 대해서 배워보자.
어떤 작업에 관한 '상태 정보'를 갖고 있는 객체입니다. 작업의 결과가 promise 객체에 저장됩니다.
상태
1) pending
작업이 진행중임을 의미하는 pending.
2) fulfilled
작업이 성공적으로 완료되었음을 의미하는 fulfilled. 이때, 작업이 성공해서 promise 객체가 fulfilled 상태가 되면, promise 객체는 '작업의 성공 결과'도 함께 갖게됩니다. (작업 성공 결과)
3) rejected
작업이 실패했음을 의미하는 rejected. 이때, 작업이 실패해서 promise 객체가 rejected 상태가 되면, promise 객체는 '작업의 실패 이유'에 관한 정보도 함께 갖게됩니다. (작업 실패 정보)
사용하는 주된 이유는 콜백 지옥이다. 그 전에 콜백 함수란 함수의 매개 변수 안에 함수를 넣는 것이다.
코드를 예시로 보자.


왼쪽이 콜백 지옥이고 오른쪽이 Promise객체를 이용한 것이다. 둘 중에 하나 유지보수를 하거나 기능 개선을
하게 된다면 아마 나는 오른쪽을 선택할 것 같다. 가독성이 콜백함수보다 훨씬 좋다.
'FrontEnd(Vue, Javascript, JQuery) > Vue' 카테고리의 다른 글
[ AxiosInstance ] (0) | 2024.07.08 |
---|---|
[ async, await ] (0) | 2024.07.08 |
[ router.beforeEach ] (0) | 2024.07.08 |
onMounted(), ref() (0) | 2024.06.21 |
Vue3 디버깅 (0) | 2024.06.19 |