Promise ?

자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object

• 정해진 장시간 기능을 수행하고, 정상적으로 수행되면?
  🔗 성공메세지 + 처리된 결과값을 전달
• 수행중 예상치 못한 에러가 발생하면?
  🔗 에러메세지 전달

🚩고려할 사항 1. State

• pending state: promise가 만들어져서 우리가 지정한 operation이 실행중
• fulfilled state: operation을 성공적으로 끝내면
• rejected state: operation이 실패하면

🚩고려할 사항 2. producer vs. consumer

• producer : 원하는 데이터를 제공하는 사람
• consumer : 제공된 데이터를 필요로 하는 사람

Producer

promise : promise를 만드는 순간, 전달한 executor 콜백함수가 바로 실행됨
따라서 프로미스 안에 네트워크 하는 코드를 생성하면, network통신을 바로 수행하게 됨
🚫 만약, 네트워크 요청을 사용자가 요구하는 경우에만 하는 경우에는 불필요한 네트워크 통신이 발생할 수 있음

executor 라는 콜백 함수를 전달해줘야 함
콜백함수에는 resolve (기능을 정상 수행 후 최종 데이터를 전달할)콜백함수, reject (기능 수행 중 문제발생시 호출할)콜백함수를 받음

resolve 콜백함수 예시)

reject 콜백함수 예시)

• catch 추가(에러핸들링 추가)
  

cf) then을 호출하면 promise를 return하게 되고, return된 promise에 catch를 등록 
즉, 각각 then은 성공한 값, catch에는 실패한 값을 받아옴

• finally 추가
  

구.콜백지옥 코드에서 promise로 !

promise 코드로 실행

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === "gazero" && password === "12345") ||
          (id === "gayoung" && password === "54321")
        ) {
          resolve(id);
        } else {
          reject(new Error("not found"));
        }
      }, 2000);
    });
  }
  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === "gazero") {
          resolve({ name: "gazero", role: "관리자" });
        } else {
          reject(new Error("no access"));
        }
      }, 1000);
    });
  }
}

const id = prompt("id를 작성해줘");
const password = prompt("비밀번호를 입력해줘");
const userStorage = new UserStorage();
userStorage
  .loginUser(id, password)
  .then(userStorage.getRoles)
  .then((user) => alert(`안뇽? ${user.name}, 너의 역할은 ${user.role}야`))
  .catch(console.log);