[JS] Promise

Promise는 비공기 작업의 단위이다. Promise를 사용하는 가장 정석적인 방법은 new Promise()를 활용한 다음과 같은 방법이다.

const pms = new Promise((resolve, reject) => {
	// 비동기 작업
});

Promise의 생성자는 함수를 인자로 받는데 이 함수를 executor라고 부른다.

 

executor는

1. 첫번째 인자로 resolve를 받고, 두번째 인자로 reject를 받는다. 

2. resolve는 executor 내에서 호출할 수 있는 또 다른 함수이며, resolve를 호출한다는 것은 작업의 성공을 의미한다.

3. reject 또한 executor내에서 호출할 수 있는 함수이며, reject를 호출한다는 것은 작업의 실패를 의미한다.

 

Promise의 특징은 new Promise(...)하는 순간 할당된 비동기 작업이 바로 시작되는 것이다. 작업이 끝나면 다음 동작을 설정할 수 있으며, 그 동작이 바로 then메소드와 catch메소드이다.

 

then 메소드는 해당 Promise 작업이 성공했을 때의 동작을 지정하며, 인자로 함수를 받는다.

catch 메소드는 해당 Promise 작업이 실패했을 때의 동작을 지정하며, 인자로 함수를 받는다.

위 두 함수는 체인 형태로 활용할 수 있다.

 

const pms = new Promise((resolve, reject) => {
	resolve();
})
pms
	.then(() => {
    	console.log("then!");
    })
    .catch(() => {
    	console.log("catch!");
    })

다음의 코드는 then! 하나만을 출력한다.

이유는 pms의 Promise가 resolve하나만을 호출하기 때문이다.

 

 

Promise는 new Promise(...)를 하는 순간 비동기 작업이 시작된다. 때문에 같은 비동기 작업을 수행할 때마다 new Promise를 해줘야만 하는데 사실 그건 비효율적이다. 그것보단 new Promise를 리턴해주는 함수를 하나 만들어 사용하는 것이 효율적이다.

 

function startAsync(age){
	return new Promise((resolve, reject) => {
    	if(age > 20) resolve('${age}');
        else reject(new Error('${age}'));
    });
}

setTimeout(() => {
	const pms = startAsync(25);
    pms
    	.then((value) => {
        	console.log(value);
        })
        .catch((error) => {
        	console.log(error);
        });
    const pms2 = startAsync(25);
    pms2
    	.then(() => {
        	console.log("2 then");
        })
        .catch(() => {
        	console.log("2 catch")
        });
}, 1000);