[Javascript] - promise 메서드 then, catch, finally

소비함수 메서드(method): then, catch, finally

new Promise에 전달되는 함수는 executor(실행자, 실행 함수)라고 부른다. executor는 new Promise 가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다.

만들어진 제작 코드의 결과를 기다렸다가 이를 소비하는 소비코드에 대해서 알아보려고 한다. 

 

---

then

then을 이용해서 다음과 같은 코드를 작성해 보았다.

 

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('입장해주세요');
	}, 3000)
});

//소비코드(consuming code)
promise.then(value => {
	console.log(value);
});

 

3초후에 '입장해주세요'라는 값이 실행된다.

 

then은 프로미스가 정상적으로 잘 수행이 되어서 마지막에 최종적으로 resolve라는 콜백 함수를 통해서 전달한 값이 value의 파라미터로 전달되어서 들어오는 걸 볼 수 있다.

반대로 reject를 쓰게 되었을 때의 경우이다.

 

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000)
});

//소비코드(consuming code)
promise.then(value => {
	console.log(value);
});

 

실행시켜보면 다음과 같은 에러 메시지가 출력된다. Uncaught라는 에러가 발생한다 이 말은 우리가 then이라는 것을 이용해서 성공적인 케이스만 다뤘기 때문에 잡히지 않은 에러가 발생한 것이다.

 

 

코드 실행 결과

 

방금 전과 같은 에러가 발생한 경우만 다루고 싶을 때는 catch라는 메서드를 사용한다.

 

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000)
});

//소비코드(consuming code)
promise
	.then(value => {
		console.log(value);
	})
	.catch(error => {
	  console.log(error);
	});

 

이제는 더 이상 에러가 발생하지 않고 받아온 에러가 콘솔 창에 실행되는 것을 확인할 수 있다.

 

코드 실행 결과

 

💡 프로미스에 then을 호출하게 되면 then은 결국 똑같은 프로미스를 리턴하기 때문에 그 리턴된 프로미스에 catch를 다시 호출할 수 있다 = 체이닝(chaining)

 

 finally

finally는 성공이든 실패이든 상관없이 무조건 마지막에 호출되는 메서드이다.

 

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000)
});

//소비코드(consuming code)
promise
	.then(value => {
		console.log(value);
	})
	.catch(error => {
	  console.log(error);
	})
	.finally(() => {
		console.log('-제주맛집');
	});

 

위와 같이 성공, 실패 여부 관계없이 어떤 기능을 마지막으로 수행하고 싶을 때 사용한다.