반응형
콜백지옥의 문제점
가독성이 떨어짐, 비즈니스 로직을 이해하기 어려움
에러가 발생하거나 디버깅이 필요할 때, 유지보수하기 어려움
콜백지옥 예시
// 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)
반응형
'Today I Learn > JavaScript' 카테고리의 다른 글
[JavaScript] 조건에 따라 날짜 형식 다르게 주기 (0) | 2022.06.28 |
---|---|
[JavaScript] Promise의 의미와 Promise 사용법 (0) | 2021.12.03 |
[JavaScript] 자바스크립트의 기본 입출력 (0) | 2021.08.17 |