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