Promise

JS에서 비동기를 편리하게 할 수 있도록 도와주는 object

state (상태)

• pending -> promise가 생성되고, 우리가 지정한 operation이 실행중..

• fulfilled -> 실행 완료!

• rejected-> 실행 실패!

Producer vs Consumer

원하는 데이터를 만들어내는 producer(promise object) 와 이 데이터를 소비하는 consumer

producer

const promise = new Promise((resolve, reject) => {
    console.log("doing something heavy...");
});

• promise를 생성하자마자 바로 실행되는 것을 알 수 있다.
• 비동기 작업에 적합한 것들 ( 네트워크에서 데이터 받아오기, 파일에서 큰 데이터 불러오기 등)
• 하지만 promise를 생성하자마자 excute함수가 바로 실행되기 때문에, 버튼을 눌렀을 때 작동하게 하고싶다면 적합하지 않을 수 있다. (불필요한 데이터를 받아올 수 있기 때문!)

const promise = new Promise((resolve, reject) => {
    console.log("doing something heavy...");
    setTimeout(() => {
        resolve("gyong");
    }, 2000);
});

• 성공적으로 작업을 수행한다면, resolve 콜백함수를 통해 전달하고자 하는 데이터를 넘겨주면 된다!!

consumer

then, catch, finally에 대해 알아보자

promise.then((value) => console.log(value));

• 아까 resolve로 전달된 값은 then을 통해 손쉽게 받아올 수 있다.

const promise = new Promise((resolve, reject) => {
    console.log("doing something heavy...");
    setTimeout(() => {
        // resolve("gyong");
        reject(new Error("no network"));
    }, 2000);
});

promise
    .then((value) => {
        console.log(value);
    })
    .catch((error) => {
        console.log(error);
    });

• resolve가 아닌 reject를 호출한다면??
• then도 결국 promise를 return 하기 때문에, return된 promise에서 catch를 호출에 에러 처리도 가능하다!
• 이러한 방식을 chaining 방식이라 한다!

promise
    .then((value) => {
        console.log(value);
    })
    .catch((error) => {
        console.log(error);
    })
    .finally(() => console.log("finally"));

• finally는 성공하든 실패하든 호출되어진다.
• 위의 코드는 에러메세지를 호출하고 finally를 호출하게 된다.

Chaining 연습

fetchNumber
    .then((num) => num * 2)
    .then((num) => num * 3)
    .then(
        (num) =>
            new Promise((resolve, reject) => {
                resolve(num - 1);
            })
    )
    .then((num) => console.log(num - 1));

• then은 resolve로 받은 값을 전달 할 수도 있지만, promise( 또 다른 비동기 작업)를 전달할 수도 있음을 기억하쟈!

callback 지옥 해결하기

class UserStorage {
    loginUser(id, password) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (id === "gyong" && password === "1234") {
                    resolve(id);
                } else {
                    reject(new Error("not found"));
                }
            }, 2000);
        });
    }

    getRoles(user) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (user === "gyong") {
                    resolve({ name: "gyong", role: "admin" });
                } else {
                    reject(new Error("no access"));
                }
            }, 1000);
        });
    }
}

const userStorage = new UserStorage();

id = prompt("enter your id:");
password = prompt("enter your password");

userStorage
    .loginUser(id, password)
    .then((user) => userStorage.getRoles(user))
    .then((position) =>
        console.log(`Hello ${position.name} you have ${position.role}`)
    );

• resolve, reject를 사용하기 때문에 onSuccess, onError와 같은 parameter는 필요없다!!!
• id, password를 파라미터로 전달해주고
• id값을 getRoles에 전달!
• chaining을 사용해 전달받은 값을 출력!!!!!!!!