Asynchronous Callback

JavaScript는 동기적 언어로써, 호이스팅이 된 이후부터 코드가 순서에 맞게 하나씩 동기적으로 실행된다. 이 때 API를 사용하여 일정한 시간이 지나면 내가 지정한 콜백함수가 실행되도록 하면, 시간차로 인한 비동기적 실행이 이루어진다.

일반코드 비동기 실행

<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

😵‍💫 콜백지옥 경험하기!

1. 사용자에게 id, password를 입력받아온다.
2. 입력받은 내용으로 서버에 로그인한다.
3. 로그인한 사용자의 id를 다시 받아온다.
4. id로 Role(역할)을 다시 요청해서 받아온다.
5. 이 Role을 이용해서 사용자의 오브젝트(name, role)를 출력한다.

<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와 password를 차례대로 입력하면 다음과 같은 메세지가 뜬다~!
  

📌 추가) 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>

🌱 Dream Coding 의 내용을 정리하였습니다. :)