Promise - 콜백 지옥을 Promise로 바꾸기!

//Callback Hell example
class UserStorage{
    loginUser(id, password, onSuccess, onError){
        setTimeout(()=>{
            if(
                (id === 'ellie' && password === 'dream') ||
                (id === 'coder' && password === 'academy')
            ){
                onSuccess(id);
            }else{
                onError(new Error('not found'));
            }
        } , 2000);
    }
    getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if(user === 'ellie'){
                onSuccess({name: 'ellie', role: 'admin'});
            } else {
                onError(new Error('no access'));
            }
        }, 1000);
    }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(
    id,
    password,
    user => {
        userStorage.getRoles(
            user,
            userWithRole => {
                alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
            },
            error => {
                console.log(error);
            }
        );
    },
    error =>{
        console.log(error);
    }
);

위와 같은 콜백 지옥을 쉽게 Promise를 통해 간결하고 가독성 좋게 만들 수가 있다.

 

const loginUser =  (id,password) => 
    new Promise((resolve,reject) => {
        setTimeout(()=>{
            if(
                (id === 'ellie' && password === 'dream') ||
                (id === 'coder' && password === 'academy')
            ){
                resolve(id);
            }else{
                reject(new Error('not found'));
            }
        } , 2000);
    })

const getRoles = (user) =>
    new Promise((resolve,reject) => {
        setTimeout(()=>{
            if(user === 'ellie'){
                resolve({name: 'ellie', role: 'admin'});
            } else{
                reject(new Error('no access'));
            }
        }, 1000);
    })

const id = prompt('enter your id');
const password = prompt('enter your password');

loginUser(id,password)
.then(user => getRoles(user))
.then(user => alert(`Hello ${user.name}, you have a ${user.role}.`))
.catch(error => console.log(error));

나는 클래스는 사용하지 않았는데, loginUser와 getRoles를 프로미스를 return하는 메소드로 만들고 두 메소드를 한 클래스 안에 정의해서 만들어도 될 것이다.

 

프로미스를 왜 사용하는지, 프로미스가 얼마나 간단하고 사용하기 좋은지를 깨닫기 위해서는 콜백 지옥을 일단 경험했어야 했는데 너무 가독성도 떨어지고 어려워서 진짜 이 부분에서 포기할 뻔 했는데 꾹 참고 차근차근 해서 한 시련을 극복하고 나니 이해가 되고 기분이 좋다. 이 성취감과 뿌듯함을 잃지 말고 계속 코딩공부해나가는 개발자가 되어야 겠다.