Promise로 콜백지옥 개선

콜백을 계속 nesting해서 사용하는 것을 Promise 를 통해 방지할 수 있다.

Promise를 써보니 상태에 따라 resolve와 reject로 나눠서 함수를 만들 수 있고

producer 와 consumer로 구분할 수 있어서 코드가 훨씬 쉽게 보이는 것 같다.

producer에서 Promise를 만들고 consumer에서 then,catch,finally를 사용할 수 있다.

드림코딩엘리님(유튜브) 강의자료

일단 UserStorage 클래스에 두개의 API를 Promise로 만들자.

loginUser API가 id 와 password를 받고 Promise를 return 하도록 만들자.

어떤 함수가 실행되고 제대로 실행되면 resolve로 id를 받고, 그렇지 않으면 reject로 error를 발생시킨다.

Promise의 resolve와 reject를 쓰기 때문에 onSuccess, onError같은 콜백함수를 일일이 지정할 필요가 없다.

getRoles도 마찬가지

드림코딩엘리(유튜브)님 강의자료

userStorage에 loginUser API를 실행해서 id,password,onSuccess함수,onError함수를 차례로 전달한다.

onSuccess일 경우(회원이 로그인 할 경우) 바로 getRoles API를 통해 회원의 role을 가져온다.

그리고 getRoles API의 onSuccess함수를 전달하면서 다시한번 콜백이 쌓인다. 

이렇게 콜백지옥이 만들어 진다.

반면 Promise를 사용한 경우 위 코드처럼 가독성이 좋고 깔끔하다. 

userStorage의 loginUser API를 실행하고 id,password를 전달한다.

then 그리고 그게 정상적으로 수행되면 userStorage에 getRoles API에 전달해서 실행한다.

then 그리고 그정보를 user로 받아서 alert로 실행한다.

catch는 비정상적으로 실행되서 에러가 발생하면 catch로 잡아낼 수 있다.

위 코드에서는 회원이 아니거나(loginUser) 이름이 ellie가 아닌 경우가 되겠다. 

아직 Promise의 then, catch, finally 사용하는게 익숙치 않은 것 같다. 여러가지 예제를 반복 연습하면서 숙달시켜야겠다.