[드림코딩 자바스크립트] 비동기 promise

https://youtu.be/JB_yU6Oe2eE

주석은 콜백 지옥 예제

// class UserStorage {
//   loginUser(id, password, onSuccess, onFailure) {
//     setTimeout(() => {
//       if (
//         (id === "홍길동" && password === "아버지") ||
//         (id === "황진이" && password === "청산리")
//       ) {
//         onSuccess(id);
//       } else {
//         onFailure(new Error("not found"));
//       }
//     }, 2000);
//   }

//   getRoles(user, onSuccess, onFailure) {
//     setTimeout(() => {
//       if (user === "홍길동") {
//         onSuccess({
//           name: "홍길동",
//           role: "아버지를 아버지라 부르지도 못하고...",
//         });
//       } else {
//         onFailure(new Error("no access!!!"));
//       }
//     }, 3000);
//   }
// }

// const userStorage = new UserStorage();
// const id = prompt("너의 이름은");
// const password = prompt("비밀번호는?");
// userStorage.loginUser(
//   id,
//   password,
//   (user) => {
//     userStorage.getRoles(
//       user,
//       (userWithRole) => {
//         alert(`Hello ${userWithRole.name}, 너의 명대사 ${userWithRole.role}`);
//       },
//       (error) => {
//         console.log(error);
//       }
//     );
//   },
//   (error) => {
//     console.log(error);
//   }
// );

// 1. Producer
// when new Promise is created, the executor runs automatically
// 프로미스가 만들어지는 순간 수행!
const promise = new Promise((resolve, reject) => {
  //doing some heavy work(network, read files)
  console.log("doing something...");
  setTimeout(() => {
    resolve("내가바로들어온값");
  }, 2000);
});

// 2. Consumers : then, catch, finally
promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
  });

% node index.js
doing something...
내가바로들어온값

 

then은 프로미스가 잘 수행되어서 최종적으로 

resolve라는 콜백함수를 통해서 전달한 값이 value 파라미터로 전달되어져서 들어오는 것을 볼 수가 있다.

// 2. Consumers : then, catch, finally

promise.then((value) => {

console.log(value);

});

<프로미스 체이닝>

//3.promise chaining
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); //1
});

fetchNumber
  .then((number) => number * 2) //2
  .then((number) => number * 3) //6
  .then((number) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(number - 1), 1000);
    }); //5
  })
  .then((number) => console.log(number)); //5

 

 

//4.Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("닭"), 4000);
  });

const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen}=>egg`), 4000);
  });

const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg}=>후라이`), 4000);
  });

getHen()
  .then((hen) => getEgg(hen))
  .then((egg) => cook(egg))
  .then((meal) => console.log(meal));

닭=>egg=>후라이

 

//4.Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("닭"), 4000);
  });

const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen}=>egg`), 4000);
  });

const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg}=>후라이`), 4000);
  });

getHen().then(getEgg).then(cook).then(console.log);

getHen() //

  .then(getEgg)

  .then(cook)

  .then(console.log)

  .catch(console.log);

 

 

콜백 지옥을 프로미스로 변경!

class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === "홍길동" && password === "아버지") ||
          (id === "황진이" && password === "청산리")
        ) {
          resolve(id);
        } else {
          reject(new Error("not found"));
        }
      }, 2000);
    });
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === "홍길동") {
          resolve({
            name: "홍길동",
            role: "아버지를 아버지라 부르지도 못하고...",
          });
        } else {
          reject(new Error("no access!!!"));
        }
      }, 3000);
    });
  }
}

const userStorage = new UserStorage();
const id = prompt("너의 이름은");
const password = prompt("비밀번호는?");
userStorage //
  .loginUser(id, password)
  .then(userStorage.getRoles)
  .then((user) => alert(`Hello ${user.name}, 너의 명대사 ${user.role}`))
  .catch(console.log);