코드잇 학습일기 Day8. rejected 상태에서 실행하는 콜백, then 메소드 이해

코딩인강 코드잇의 챌린지 이벤트, 마지막 학습일기 포스팅이다. 회사를 다니며 학습일기를 써야한다는 게 부담스럽게 느껴질 때도 있었지만 그래도 덕분에 하루에 다섯개씩 강의를 들을 수 있었다. 왠지 마지막이라고 하니까 시원섭섭한 기분이 든다. 나중에 회사 업무에 여유가 생기면 꼭 이벤트가 아니더라도 셀프 챌린지를 해봐도 좋겠다는 생각이다. 

 

코드잇 학습 인증

 

오늘 공부한 내용은 rejected 상태에서 실행할 콜백을 지정하는 방법과 then 메소드에 관한 것이었다. 자바스크립트를 공부하는 분들을 위해 포스팅으로 정리해 보도록 하겠다.

---

Promise 객체가 Rejected 상태일 때 실행하는 콜백 지정

Promise 객체가 갖는 상태값은 pending, fulfilled, rejected - 총 3개이다. 더 자세히 알고 싶다면 지난 포스팅을 참고하면 된다.

2023.02.20 - [프로그래밍 언어 & 데이터베이스/JavaScript] - 코드잇 학습일기 Day7. Promise 객체와 Promise Chaining

그런데 이전 포스팅에서는 성공했을 경우(fulfilled 상태)에 실행하는 콜백이 있는 것만 가정했었다. 만약 promise 객체가 rejected 상태가 되었을 때 실행하고자 하는 콜백이 있다면 어떻게 해야할까? 

 

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text(), (error) => { console.log(error); })
  .then((result) => { console.log(result); });

 

위와 같은 코드에서 두번째 줄에 있는 then 메소드를 보자. 앞쪽의 (response) => response.text() 부분은 성공했을 때에 실행할 콜백, 뒤쪽의 (error) => { console.log(error) 부분은 실패했을 때에 실행할 콜백을 나타낸다.

위 코드를 실제로 브라우저의 개발자 도구에서 실행해 보면 아래와 같은 결과를 얻을 수 있다.

 

Promise 객체가 rejected 상태

 

TypeError: Faild to fetch at <anonymous>:1:1 이라고 쓰여 있는데, 실패했기 때문에 에러값을 그대로 출력한 것이다. 이와 같이 Promise 객체가 rejected 상태가 되었을 때 실행을 원하는 콜백이 있다면, then 메소드의 두번째 파라미터로 넣으면 된다.

 

then 메소드에 대해 더 자세히 알아보기

then 메소드가 리턴한 Promise 객체가 그 콜백의 리턴값에 따라서 어떻게 달라지는지 알아보도록 하겠다.

콜백에서 Promise 객체를 리턴

then 메소드가 리턴한 객체와 콜백이 리턴한 객체가 동일한 상태와 결과를 갖는다. 

콜백에서 Promise 객체가 아닌 일반적인 값을 리턴

then 메소드가 리턴한 객체는 fulfilled 상태가 되고, 해당 리턴값을 작업 성공 결과로 갖는다.

콜백에서 아무것도 리턴하지 않음

자바스크립트에선 함수가 아무것도 리턴하지 않으면, undefined를 리턴한 것으로 간주한다는 것을 지난 포스팅에서 설명했었다. 따라서 then 메소드가 리턴한 promise 객체는 fulfilled 상태가 되고, 그 작업 성공 결과로 undefined를 갖는다.

콜백 실행 중 에러 발생

콜백 실행 중 에러가 발생하면 then 메소드가 리턴한 Promise 객체는 rejected 상태가 되고, 해당 에러 객체를 작업 실패 정보로 갖는다.

콜백이 실행되지 않음

호출된 then 메소드를 갖고 있는, 이전 Promise 객체와 동일한 상태, 결과를 가진다. 

 

코드잇 퀴즈 풀기

---

마지막 학습일기니까, 그냥 마무리하기엔 아쉬우니까 셀프 자랑타임!

코드잇에는 배지 시스템이 있어서 챌린지 도전을 하고 조건을 달성하면 배지를 받을 수 있다. 나는 주간 챌린지 배지 받기에 도전했었는데, 학습일기를 쓰니 자동으로 조건이 충족되어서 2월 1주, 2주, 3주 모두 배지를 받을 수 있었다. 

 

코드잇 배지 시스템

 

아마 2월 4주차에도 무난하게 챌린지를 성공하지 않을까 싶다. 코드잇 학습일기와 함께 즐거웟던 한달이었다.