[JavaScript] 자바스크립트 기본 part 5

 

Promise

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

기능 수행해서 성공하면 메시지와 함께 결과 값 전달, 문제가 발생하면 에러 전달하며 자바스크립트에 내장되어 있다.

프로미스의 역할은 비동기적인것을 사용할 때 콜백 함수를 대신하는 역할을 한다.

정보를 제공하는 Producer, 정보를 사용하는 Consumer로 구분

Promise는 클래스이기 때문에 new 키워드를 사용한다.

네트워크 통신이나 파일을 불러오는 것은 비동기로 처리하는 것이 좋다.

새로운 프로미스가 만들어지면, executor가 자동적으로 실행된다.

이 것은 내가 의도하지 않았는데도 실행될 수도 있고 이 점을 염두에 둬야 한다.

 

Producer

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

// 성공 시 실행되는 코드는 resolve, 실패 시 실행되는 코드는 reject로 작성

 

Consumer

// then, catch, finally

promise
.then((value)=>{
    console.log(value);
}) // Producer에서 reject를 사용할 때 then만 넣게 되면 Uncaught 에러 발생
.catch((error)=>{
    console.log(error);
}) // catch도 넣어주어야 더이상 Uncaught 에러가 발생하지 않음
.finally(()=>{
    console.log('finally');
}) //성공하든 실패하든 마지막으로 실행하고 싶을 때 finally 사용

 

Promise Chaining

// then은 값을 바로 전달해도 되지만 promise에 전달해도 된다.

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));

// 5 출력

 

Error Handling

const getHen=()=>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve('chicken'),1000);
    });

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

const cook = egg =>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(`${egg}=>cook`),1000);
    });

getHen()
.then(hen=>getEgg(hen))
.then(egg=>cook(egg))
.then(meal=>console.log(meal))
// chicken=>egg=>cook 출력

// 간단하게 아래처럼 줄이는 것이 가능
getHen()
.then(getEgg)
.then(cook)
.then(console.log);

 

// 에러 처리하기

const getHen=()=>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve('chicken'),1000);
    });

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

const cook = egg =>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(`${egg}=>cook`),1000);
    });

getHen()
.then(hen=>getEgg(hen))
.catch(error=>{
    return 'bread';
}) // 에러 출력 대신 bread로 대체
.then(egg=>cook(egg))
.then(meal=>console.log(meal))

 

콜백함수 대신 Promise로 간단하게 로그인 기능 만들기

class UserStorage{
    loginUser(id, password){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //백엔드가 없기 때문에 timeout으로 예제
                if(
                    (id === 's1' && password === '1')||
                    (id === 's2' && password === '2')
                ){
                    resolve(id);
                }else{
                    reject(new Error('not found'));
                }
    
            },2000);
        });   
    }

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

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('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);