[aysnc..await pt2] callback hell -> promise

Promise: 약속하다.
JS->비동기를 간편하게 처리할 수 있도록 도와주는 Object이다.
정해진 장시간에 기능을 수행하고 나서 정상적으로 기능이 수행이 됬다면, 성공의 메시지와 처리된 결과값을 전달해준다.
error가 나오면 error를 전달한다.
promise함수에 대해서는 2가지의 포인트가 있다.

1. state: 상태. 이 프로세스가 무거운 operation을 수행하고 있는 중인지 아니면 이 기능 수행이; 다 완료가 되어서 성공했는지 실패했는지.
2. producer와 consumer. 우리가 원하는 데이터를 producing 제고하는 상람과 이 제공된 데이터를 쓰는 사람 consumer

state: 수행중일 때는 pending -> filfilled or rejected 가 있다.

promise 만들기

새로운 프로미스가 만들어질떄는 executor가 자동으로 실행되므로 우의해야 한다.

const promise = new Promise((resolve, reject) => {
console.log("무엇인가를 하는중입니다.");
setTimeout(() => {
                    //그 무엇인가를 했는데 성공하면
                    resolve("무엇을 했습니다. 결과가 있습니다.something like that")
                    //했는데 failed 했다면. *Error()는 js에 제동하는 Object중 하나
                    reject(new Error("No good"))
			}, 2000); //2초뒤 결과를 나타낸다.
})

상위를 이용하는 consumer를 생성하자

.then .catch .finally
값이 정상적으로 수행이 잘 된다면 이제 값을 받아온다.

promise//성공적이면
.then((value) => {console.log(value)})
//실패를 하면 error 출동!
.catch((error) =>{console.log(error)})
//실패를 하던 성공을 하던 무조건 반환되는 것 출동!
.finally(() => {console.log("finally")})

이 전 포스트 welcome to hell callback예시를 봤으면 promise를 사용해서 한번 줄여봤다.

class UserStorage {
  //사용자 로그인, 아이디, 비번, 성공하면 , Error가 있으면 콜백 함수
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
      //조건문 실행
        if (
          (id === "calvin" && password === "password") ||
          (id === "park" && password === "password")
        ) {
        //조건문이 성공하면
          resolve(id);
        } else {
          //아이디(calvin, park)가 아니면
          reject(new Error("id not found"));
        }
      }, 2000);
    });
  }
  //로그인이 성공하면 그 아이디의 role 가져오기
  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
      //userRole의 조건문 실행 
        if (user === "calvin") {
          resolve({ name: "calvin", role: "admin" });
        } else if (user === "park") {
          resolve({ name: "park", role: "regular" });
        } else {
        //둘다 아니면
          reject(new Error("no access"));
        }
      }, 1000);
    });
  }
}
//변수 선언, 클래스니깐 new를 붙힌다.
const userStorage = new UserStorage();
const id = prompt("enter id");
const password = prompt("enter password");

userStorage
  .loginUser(id, password) //로그인 성공 then: 그다음
  .then(userStorage.getRoles)// getRoles을 실행한다.  그다음 
  .then((user) =>//user의 이름과 role을 가져온다. 
    alert(
      `Hello ${user.name}, welcome to call back hell and your role is ${user.role}`
    )
  )//에러 발생.  reject 출동!
  .catch(console.log);

보기 깔끔하다.
callback함수에서 간단하게 작성이 되니 너무 너무 편하다. resolve즉 성공을하면 then에서 다음 function을 실행을 하면된다. 하지만 에러가 나면 .catch(잡으면 된다).
햇병아리 수준의 개발지식으로는 DB와 연결할때 와 query를 작성하고 반환되는 값을 가져올때 작성하면 좋을꺼 같단 말이지.
그다음으로는 비동기의 마지막편 aysnc...await을 한번 알아보자!