[JavaScript] Callback Hell과 Promise

콜백지옥의 문제점

가독성이 떨어짐, 비즈니스 로직을 이해하기 어려움
에러가 발생하거나 디버깅이 필요할 때, 유지보수하기 어려움

 

콜백지옥 예시

// Callback Hell example
class UserStorage {
	loginUser(id, password, onSuccess, onError) {
    	setTimeout(() => {
        	if(
            	(id === 'abc' && password === '12345')
            ) {
            	onSuccess(id);
            } else {
            	onError(new Error('정보를 찾을 수 없습니다'));
            }
        }, 2000);
    }
    
    getRoles(user, onSuccess, onError) {
   		setTimeout(() => {
        	if(user === 'abc') {
            	onSuccess({ name: 'abc', role: 'admin' })
            } else {
            	onError(new Error('정보를 찾을 수 없습니다'));
            }
        }, 1000)
    }
}

const userStorage = new UserStorage();
const id = prompt('아이디를 입력하세요');
const password = prompt('비밀번호를 입력하세요');
userStorage.loginUser(
    id,
    password,
    user => {
    	userStorage.getRoles(
            user, 
           	userWithRole=> {
            	alert(`안녕하세요 ${userWithRole.name}님은 ${userWithRole.role} 입니다.`)
            },
			error ={console.log(error)}        	
    },
    error => {console.log(error)}
);

}, (error))

 

Callback Hell -> Promise

class UserStorage {
	loginUser(id, password) {
    	return new promise((resolve, reject) => {
           setTimeout(() => {
              if(
                  (id === 'abc' && password === '12345')
              ) {
                  resolve(id);
              } else {
                  reject(new Error('정보를 찾을 수 없습니다'));
              }
           }, 2000);
        });
    }
    
    getRoles(user) {
    	return new Promise(() => {
       	  setTimeout(() => {
        	if(user === 'abc') {
            	resolve({ name: 'abc', role: 'admin' })
            } else {
            	reject(new Error('정보를 찾을 수 없습니다'));
            }
          }, 1000);
        });
    }
}

const userStorage = new UserStorage();
const id = prompt('아이디를 입력하세요');
const password = prompt('비밀번호를 입력하세요');
userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then(user => alert(`안녕하세요 ${user.name}님은 ${user.role} 입니다.`));
.catch(console.log)