드림코딩 : JS - 11. Callback 지옥

'use strict';
 
//JavaScript is synchronous (자바스크립트는 동기적이다)
//hoisting이 된 이후부터 코드가 순서에 맞춰 동지거으로 실행된다
//hoisting: var, function declaration 이 제일 위로 올라가는 것이다
console.log('1');
setTimeout(() => console.log('2'),1000);  //1초가 지나면 출력한다, callback 함수 = 원하는 기능 전달, 비동기(asynchronous)
console.log('3');
 
//Synchronous callback
function printImmediately(print){
    print();
}
printImmediately(() => console.log('hello')); //콘솔에 1 | 3 | hello | 2 순서로 출력
 
//Asynchronous callback
function printWithDelay(print, timeout){
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);
 
 
 
//Callback Hell example
class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if(
                (id === 'sigcho' && password === 'dream') ||
                (id === 'corder' && password === 'academy')
            ) {
                onSuccess(id);  //onSuccess 콜백 불러준다, id 전달
            } else {
                onError(new Error('not found'));  //onError 콜백 불러준다, Error객체 만들어서 'not found'전달한다
            }
        }, 2000);
    }
 
    getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if (user === 'sigcho') {
                onSuccess({name: 'sigcho', role: 'admin'});
            } else {
                onError(new Error('no access'));
            }
        }, 1000);
    }
}
 
//1. id와 password 사용자에게 받아오기
//2. 서버에 login
//3. id를 통해서 role 받아오기
//4. 사용자의 object 출력
 
const userStorage = new UserStorage(); //클레스 만들기, 클레스로 백엔드와 통신한다
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(
    id, 
    password,
    user => {   //onSuccess일 때, 사용자의 데이터 받아옴
        userStorage.getRoles(   //사용자의 역할을 받아옴
            user, 
            userWithRole => {
                alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`); //사용자에게 역할을 알려준다
            },
            error => {
                console.log(error);
            }
            ); 
    },
    error => {console.log(error)}, //onError일 때, 에러 전달
);
 

 

 

콜백 - 동기, 비동기

 

콜백 지옥 성공 했을 때 알림창