Web JavaScript Promise
Promise 기능
이전 callback 함수를 이용할대 콜백지옥을 경험하게 되었다. 따라서 promise를 활용하여 좀더 간략하게 표현이 가능하다.
우선 promise를 사용하는 방법은 2가지로 나누어 진다. 먼저 promise를 선언해야한다.
// 1. Producer
const promise = new Promise((resolve, reject)=>{
// network 통신 과정 , 또는 파일 읽어오기
console.log('doing something...'); // promise생성시 바로 실행 그래서 항상 필요시에 생성시에 실행할 코드만 작성
setTimeout(()=>{ //network 통신이라고 가정
// resolve('Kim'); //통신 성공시 return하는 콜벡함수
reject(new Error('no network'));
},2000);
});
그리고 실제 사용을 하는 부분에서 promise에서의 return값을 받을 수 있다.
//2. Consumers then, catch, finally
promise
.then((value)=>{
console.log(value);
})
.catch(error=>{ //reject의 error를 잡아주는 부분
console.log(error);
})
.finally(()=>{console.log('finally'); //성공, 실패 상관없이 실행
});
then 은 통신이 성공 했을때 promise의 resolve값을 돌려 받고 catch는 error 즉 reject되 었을때 에러가 되는부분을 잡아 준다. finally는 성공, 실패 상관 없이 실행된다.
//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));
위의 코드를 통해 promise를 통해 연결연결을 하여 진행하는것을 볼 수 있다.
Promise를 통해 이전의 콜백지옥 코드를 바꿀 수 있다
class UserStorage{
loginUser(id, password){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
if(
(id==='Kim' && password === 'byungin')||
(id==='coder' && password === 'example')
){
resolve(id);
}else{
reject(new Error('not found'));
}
},2000);
});
}
getRoles(user){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
if(user === 'Kim'){
resolve({name:'Kim',role:'admin'});
}else{
reject(new Error('no access'));
}
}, 1000);
});
}
}
const userStorage = new UserStorage();
const id = prompt('id 입력');
const password = prompt('비번 입력');
userStorage.loginUser(id,password)
.then(userStorage.getRoles)
.then(user=>alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);