[드림코딩] 콜백함수 (4) : 콜백지옥 탈출, Promise (callback hell 코드개선하기)

Callback Hell 예시

이전시간에 만들었던 콜백지옥 예시다.

// 기본세팅
class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'master' && password === 'master00') ||
        (id === 'submaster' && password === 'submaster00')
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'master') {
        onSuccess({name: 'Master', role : 'admin'});
      } else {
        onError(new Error('Go away!'));
      }
    }, 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} role'
        );
      },
      error => {
        console.log(error);
      }
    );
  },
  error => {
    console.log(error);
  }
);

이를 promise를 이용해 깔끔하게 개선해 보자.

---

개선된 코드

class UserStorage {
  loginUser(id, password) { //onSuccess, onError같은 콜백함수를 만들 필요가 없다.
    return new Promise((resolve, reject) => { //새로운 promise를 만든다.
      setTimeout(() => {
        if (
          (id === 'master' && password === 'master00') ||
          (id === 'submaster' && password === 'submaster00')
        ) {
          resolve(id); //onSuccess 대신 resolve
        } else {
          reject(new Error('not found')); //onError 대신 reject
        }
      }, 2000);
    });
  }
  
  getRoles(user) {//onSuccess, onError같은 콜백함수를 만들 필요가 없다.
    return new Promise((resolve, reject) => { //새로운 promise를 만든다.
      setTimeout(() => {
        if (user === 'master') {
          resolve({name: 'Master', role : 'admin'}); //onSuccess 대신 resolve
        } else {
          reject(new Error('Go away!')); //onError 대신 reject
        }
      }, 1000);
    });
  }
}


const userStorage = new UserStorage();
const id = prompt('Enter your id');
const password = prompt('Enter your password');

userStorage
  .loginUser(id, password)
  .then(userStorage.getRoles) //.then(user => userStorage.getRoles)에서 축약 가능 (인자가 같으므로)
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
  .catch(console.log);

---

출처 : 드림코딩 https://www.youtube.com/@dream-coding / MDN https://developer.mozilla.org/ko/