callback

대표적인 비동기 함수 : setTimeout(()=>{}, 0)

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

// expected output: 1
// expected output: 3
// expected output: 2

 

콜백함수가 무조건 비동기는 아니다. 

// Synchronous callback 동기 콜백
function printImmediately(print) {
  print();
}
printImmediately(() => console.log("동기 콜백"));


// Asynchronous callback 비동기 콜백
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
function printText() {
  console.log("비동기 콜백");
}
printWithDelay(printText, 0);


// expected output: 동기 콜백
// expected output: 비동기 콜백

 

콜백지옥 예시

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      const user = { id: id, password: password };
      if (
        (id === "sunny" && password === "1234") ||
        (id === "kimadmin" && password === "1234")
      ) {
        onSuccess(user);
      } else {
        onError(new Error("not fount"));
      }
    }, 2000);
  }
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user.id === "kimadmin") {
        onSuccess({ name: "kimadmin", 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} role !`
        );
      },
      (err) => {
        console.log(err);
      }
    );
  },
  (err) => {
    console.log(err);
  }
);

 

콜백지옥 -> Promise로 리팩토링

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const user = { id: id, password: password };
        if (
          (id === "sunny" && password === "1234") ||
          (id === "kimadmin" && password === "1234")
        ) {
          resolve(user);
        } else {
          reject(new Error("not fount"));
        }
      }, 1000);
    });
  }
  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user.id === "kimadmin") {
          resolve({ name: "kimadmin", role: "admin" });
        } 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(user))
  .then(user => alert(`hello ${user.name}, you have a ${user.role} role !`))
  .catch(err => console.log(err));