[JavaScript] 비동기(Async), 동기(sync), CallBack 지옥 (콜백 지옥), new Error

// Sync → 순차적인 실행
function sync(){
    console.log('sync callback');
    console.log('1');
    console.log('2');
    console.log('3');
    // 1 → 2 → 3
}

// Async → 순차적이지 않은 실행 (분산 처리로 속도가 빠르지만 언제 값이 내려올지 몰라 대응하기 어려움)
function async(){
    console.log('sync callback');
    console.log('1');
    setTimeout(() => console.log('2'), 1000);
    console.log('3');
    // 1 → 3 → 2
}

sync();
async();

 

 

// Callback Hell (Callback Method call Callback Method) 
// → callback 함수를 남발하여 안에 내용이 보기 힘들어진 것
class UserStorage {
    loginUser(id, password, onSuccess, onError){
        setTimeout(() => {
            if (id === 'ellie' && password === 'dream')
                onSuccess(id); // id 파라미터 값을 넘겨준다.
            else
                onError(new Error('not found')); // not found라는 에러메세지를 넘겨준다
        }, 2000);
    }

    getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if (user === 'ellie')
                onSuccess()
            else
                onError(new Error('no access'));
        }, 1000);
    }
}

const userStorage = new UserStorage();
const id = 'ellie';
const password = 'dream';
userStorage.loginUser(
    id,
    password,
    success => {
        userStorage.getRoles(
            id, 
            success => console.log(`Hello ${id}`) ,
            error => console.log(error)
        )
    },
    error => console.log(error)
)

// id가 ellie 이고 password가 dream인 걸 서버에서 확인(서버 통신시간 2초라고 가정)
// 그 이후에 올바른 경우 onSuccess가 작동하고 그렇지 않으면 onError가 작동한다.