Asynchronous Callback

一般コード非同期の実行

<script>
	console.log('1');
    setTimeout(()=> console.log('2'), 1000); 
	console.log('3');
    
    // 결과 : '1'출력 > '3'출력 > (1초뒤) '2'출력
</script>

コールバック関数非同期実行

<script>
    function printWithDelay(print, timeout){
        setTimeout(print, timeout);
    }
    printWithDelay(()=> console.log('async callback'),2000);
    
    // 결과 : 2초 뒤에 'async callback' 출력 
</script>

Callback Hell

😵‍💫 カルバック地獄体験!

<script>

	// Class 생성하기 
    class UserStorage {
        loginUser(id, password, onSuccess, onError){
            setTimeout(()=> {
                if(
                    (id === 'yura' && password === 'hey') ||
                    (id === 'Jenice' && password === 'hello')
                ){
                    onSuccess(id);
                } else {
                    onError(new Error('not found'));
                }
            },2000);
        }

        getRoles(user, onSuccess, onError){
            setTimeout(()=> {
                if(user === 'yura'){
                    onSuccess({name: 'yura', role: 'student'});
                } else {
                    onError(new Error('no access'));
                }
            },1000);
        }
    }


	// 사용자 id, password 받아오고 role을 출력하는 Logic
    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)
        }
    );
    
</script>

idとパスワードを順番に入力すると、以下の情報が表示されます~!

📌 追加)Promiseで簡単に再包装!

<script>
    class UserStorage {
        loginUser(id, password){
              return new Promise((resolve, reject) => {
                  setTimeout(()=> {
                      if(
                          (id === 'yura' && password === 'hey') ||
                          (id === 'Jenice' && password === 'hello')
                      ){
                          resolve(id);
                      } else {
                          reject(new Error('not found'));
                      }
                  },2000);
              });
        }

        getRoles(user){
            return new Promise((resolve, reject) => {
                setTimeout(()=> {
                    if(user === 'yura'){
                        resolve({name: 'yura', role: 'student'});
                    } else {
                        reject(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)
        .then(user => userStorage.getRoles)
        .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
        .catch(console.log);
</script>