JS Callback #6

Gyus·2021년 8월 20일
0

자바스크립트

목록 보기
6/8

Callback

Synchronous callback

  • JavaScript is Synchronous
function printImmediately(print) {
  print();
}
printImmediately(() => console.log('hello'))
  • 위의 예제는 동기적으로 바로 실행시키는 함수.

    Asynchronous callback

function printWithDelay(print, timeout){
  setTimeout(print, timeout);
}
printWithDelay(()=> console.log('async callback'), 2000)
  • 비동기적으로, 바로 실행되는것이 아닌 2초뒤에 실행된다.

Example

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() =>{
      if (
        (id === 'gyus' && password === '1234') ||
        (id === 'coder' && password === 'academy')
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'gyus') {
        onSuccess({ name: 'gyus', role: 'admin'});
      } else {
        onError(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,
  (user) => {
  userStorage.getRoles(
    user,
    (userWithRole) => {
    alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role}`)
  },error => console.log(error))
}, (error) => {
  console.log(error)
})
  • 위코드는 비동기적으로 작성하지 않아 소위 말하는 콜백지옥이 펼쳐졌다.

    그러므로, 가독성이 떨어져 우리는 비동기적인 방식으로 위 코드를 고쳐야한다.

profile
푸로구래머

0개의 댓글