Promise

프로미스 사용법

const pr = new Promise((resolve, reject) => {
	// code
});

resolve는 성공한 경우
reject 는 실패했을 경우
이렇게 어떤 일이 완료된 이후 실행 되는 함수를 callback 함수라고 함

new promise 생성자가 반환하는 promise 객체는 state와 result를 property로 가짐
state는 초기에 pending 이였다가
성공하면 fulfilled(이행됨)가 됨
이때 result는 resolve함수로 전달된 값임
실패하면 rejected(거부됨)가 됨
이때 result는 reject함수로 전달된 error임

const pr = new Promise((resolve, reject) => {
	setTimeOut(()->{
    	resolve('OK')
    }, 3000)
});

state는 3초후에 이행되며 result는 resolve값인 'OK'가 됨

const pr = new Promise((resolve, reject) => {
	setTimeOut(()->{
    	reject(new Error('error..'))
    }, 3000)
});

state는 3초후에 거부되며 result는 reject값인 'error'가 됨

const pr = new Promise((resolve, reject) => {
	setTimeOut(()->{
    	resolve('OK')
    }, 3000)
});

pr.then(
	function(result){  * 이행 되었을때 실행
    	console.log(result + ' 가지러 가자.');
    },
    function(err){ 	   * 거부 되었을때 실행
    	console.log('다시 주문해주세요..');
    } 	
);

Catch

catch 는 error가 발생한 경우
즉 reject인 경우에만 실행

pr.then(
	function(result){}
).catch(
     function(err){} 	  
)

Finally

finally는 이행이든 거부든
처리가 완료되면 항상 실행 됨

pr.then(
	function(result){}
).catch(
     function(err){} 	  
).finally(
	function(){
    	console.log('---주문 끝---')
    }
)

예제

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("OK");
    }, 1000);
});

console.log("시작");
pr.then((result) =>{
	console.log(result);
})
	.catch((err) => {
    	console.log(err);
    })
    .finally(() => {
    	console.log("끝");
    });

시작이 나온후 1초후에 OK 나옴

reject 로 바꾼후

const pr = new Promise((resolve, reject) => {
	setTimeout(() => {
    	reject(new Error("err...."));
    }, 1000);
});

프로미스 사용 안하고 콜백으로 만드는 법

const f1 = (callback) => {
	setTimeout(function () {
    console.log("1번 주문 완료");
    callback();
    }, 1000)
}

const f2 = (callback) => {
	setTimeout(function () {
    console.log("2번 주문 완료");
    callback();
    }, 3000)
}
const f3 = (callback) => {
	setTimeout(function () {
    console.log("3번 주문 완료");
    callback();
    }, 2000)
}

console.log("시작")
f1(function(){
	f2(function(){
    	f3(function(){
        	console.log("끝")
        });
    });
});

결과

1초 3초 2초 텀이 있음

promise 사용

const f1 = () => {
	return new Promise((res, rej) => {
    setTimeout(() => {
    	res("1번 주문 완료");
    }, 1000);
    });
};

const f2 = (message) => {
	return new Promise((res, rej) => {
    setTimeout(() => {
    	res("2번 주문 완료");
    }, 3000);
    });
};

const f3 = (message) => {
	return new Promise((res, rej) => {
    setTimeout(() => {
    	res("3번 주문 완료");
    }, 2000);
    });
};

console.log("시작");
f1()							*f1을 실행하고 f1은 promise를 반환하고
.then(res => f2(res))			res함수를 실행하면서 넘겨준 값을 
.then(res => f3(res))			f2에게 넘겨줌 f2는 메세지를 받아서 로그를 
.then(res => console.log(res)); 찍어주고 마찬가지로 promise를 반환함
.catch(console.log)
.finally(() => {
	console.log("끝")
})

* 이렇게 promise가 연결되는걸 promise chaining(프로미스 체이닝) 이라 함

결과

2번을 실패로 돌려보는 예제

const f2 = (message) => {
	return new Promise((res, rej) => {
    setTimeout(() => {
    	rej('xxx');
    }, 3000);
    });
};

결과

2번에서 실패하여 3번이 실행되지 않고
finally 만 실행됨

Promise.all([])

한꺼번에 시작하고 모두 이행되면 값을 사용 할 수 있음
시간도 절약할 수 있음

Promise.all([f1(), f2(), f3()]).then((res) => {
	console.log(res);
});

이 세작업이 모두 완료되어야 then 부분이 실행됨

만약 Promise.all 사용했는데 중간에 rej가 껴있으면?

const f2 = (message) => {
	return new Promise((res, rej) => {
    setTimeout(() => {
    	rej('xxx');
    }, 3000);
    });
};

Promise.all([f1(), f2(), f3()]).then((res) => {
	console.log(res);
});

결과 값

실행이 되지 않음 하나라도 누락되면 보여주지 않아야하는 페이지에 사용

Promise.race

Promise.race([f1(), f2(), f3()]).then((res) => {
	console.log(res);
});

용량이 큰 이미지들을 로딩하는데
그 중에 하나라도 완료되면
그 이미지를 보여줄때 이 방식을 사용함

all과 race 차이점
all은 모든 작업이 완료 될때까지 기다리지만
race는 하나라도 완료되면 끝내버림