[Java Script] Promise / 비동기처리에 대해 알아보자

2021.09.28 - [WEB/Java Script] - [Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자!

[Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자!

 

 

이전글에서 콜백함수에 대해 알았다면

Promise에 대해 알아보자!

 

 

[예시]

온라인 강의가 완성되기 전에 수업등록을 해놓을 수 있다고 치자.

영희는 수업이 완성되기 전에 수업등록을 해놓아서

며칠 기다렸다가 온라인 강의가 완성되고 나서 수업을 들을 수 있게 되었다.

철수는 수업이 완성된 후에 수업등록을 해서

기다리지 않고 수업을 바로 들을 수 있다.

 

 

 

[PROMISE]

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

 

 

1. state

2. producer , consumer

 

프로미스에는 state가 있다. 상태라는 말이다.

상태에는 pending (실행 중) , fulfilled(성공적으로 완료한 상태), rejected (실패)

상태가 있다.

 

프로미스에는 producer와 consumer가 있다.

1. producer

원하는 기능을 수행해서 원하는 데이터를 만들어내는 것

2. consumer

데이터를 소비하는 것

 

 

하나씩 알아보도록 하자

 

1. producer

 

//1.Producer
const promise = new Promise((resolve, reject)=>{
    //doing some heavy work
    console.log('doing something...')
    setTimeout(() => {
        // resolve('ellie');
        reject(new Error('no network'))
    }, 2000);
})

 

promise 생성자를 보면 executor라는 콜백함수를 전달해주어야하는데

콜백함수는 또 다른 두가지의 콜백함수를 받는다.

• resolve : 기능을 정상적으로 수행해서 최종적으로 데이터를 받는 함수
• reject : 기능을 수행하다가 중간에 문제가 생기면 호출하게 될 함수

 

promise가 만들어지는 순간, 콜백함수가 바로 실행된다.

그러니까 만약에 사용자가 요청을 했을때만 네트워크 통신을 해야하는 경우 (버튼 클릭)

이렇게 만들면 불필요한 네트워크 통신이 일어나게 된다.

 

 

2. consumer

데이터들을 사용하는 것

then , catch, finally를 이용해서 값을 받아올 수 있다.

 

• then : promise가 잘 수행되어서 마지막으로 resolve로 전달되어진 값이 나온다.
• catch : reject가 나왔을때 전달되어진 error가 나온다.
• finally : 성공하든 실패하든 무조건 실행됨.

then이 promise를 리턴되기 때문에 catch를 체이닝할 수 있는 것이다.

 

//2. consumer : then, catch, finally
//잘 수행된다면 reslove에서 전달된 ellie라는 값이 나온다.
promise
    .then((value)=>{
    console.log(value) //콜백 함수
    })
    .catch(error =>{
        console.log(error) //에러핸들링
    })
    .finally(()=>{
        console.log("finally")
    })
    //이것을 chaining이라고 한다.

 

 

3. Promise chaining

then에서는 값을 바로 전달해도 되고

Promise를 전달해도 된다.

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

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

 

 

 

4. Error Handling

 

//4. Error Handling
const getHen = () =>{
    new Promise((resolve, reject) =>{
        setTimeout(() => {
            resolve('🐓')
        }, 1000);
    })
}
const getEgg = hen => 
new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve(`${hen} => 🐣`)
    }, 1000);
})
const cook = egg =>
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(`${egg} => 🍳`)
    }, 1000);
})

getHen()
.then(hen => getEgg(hen)) //then(getEgg) 로 생략가능 하나라서
.catch(error =>{
    return '🌭';
})
.then(egg => cook(egg))
.then(meal => console.log(meal))
.catch(console.log)

 

catch를 통해서 에러 헨들링을 해주어야한다.

 

 

5. 콜백지옥 예제 promise로 바꾸기

저번 글에 있던 콜백지옥 예제를 Promise로 바꾸어보자

 

//Callback to Promise
class UserStorage{
    loginUser(id, password){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(
                    (id === 'ellie' && password === 'dream')||
                    (id === 'coder' && password === 'academy')
                ){
                    resolve(id) //onSuccess라는 콜백을 전달해준다.
                }
                else{
                    reject(new Error('not found'));
                }
            },2000 );
        })
    
    }
    getRoles(user){
        return new Promise((resolve, reject) =>{
            setTimeout(() => {
                if(user==='ellie'){
                    resolve({name: 'ellie', role : 'admin'})
                } else{
                    reject(new Error('no access'));
                }
             }, 1000);
        })
      

    }
}
//사용자에게 id와 페스워드를 받아온다.
//성공이라면 역할을 받아온다. 
//성공하면 출력한다.

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = promt('enter your password');


userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then(user => alert(
    `hello ${user.name} you have a ${user.role} role`
))
.catch(console.log)

훨씬 가독성이 좋아진 것을 알 수 있다.

 

다음 글에서는 async await에 대해서 알아보자

 

 

 

 

 

 

---

 

https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12