JavaScript Promise ! 약속 하나 합시다 (ES6)

기존에 비동기를 처리 하려면 콜백 함수를 통해 처리 하였는데 아무래도 비동기 처리이다 보니 가독성 측면과 에러 발생 시 예외 처리를 하기 많이 힘들었다. 아래 예시를 보자.

try {

setTimeout(() => {

throw 'Error';

}, 1000);

} catch (err) {

console.log(err); // Error Catch 불가

}

try 문을 시작하여 setTimeout 메소드를 통해 1초 후 'Error' 라는 문자열을 보낸다. 하지만 catch에서 실제 에러를 catch 못하는 현상이 발생한다. 즉  setTimeout 함수의 콜백 함수 내에서 발생시킨 에러는 catch 블록에서 캐치되지 않고 종료되기 때문에 catch 문에서 에러를 잡을 수가 없다.

그래서 이러한 부분들을 해결하기 위해 ES6에서는 Promise를 도입하여 비동기 처리 시 조금 더 명확한 시점에 어떠한 액션을 취할수 있게 되었다.

그럼 Promise에 대해 알아보자.

Promise란 ?

비동기 연산이 종료된 이후 결과 값이나 에러에 대한 handler 역할을 하며, 비동기 메서드지만 동기 메서드인 것 처럼 값을 반환하고 더 명확한 시점에 동기 메서드처럼 처리를 할 수 있게 해준다.

const promise = function(isOk){

return new Promise((resolve, reject) => {

if (isOk) {

// 비동기 작업 수행 성공

resolve('오늘 시간 괜찮습니다.');

} else {

// 비동기 작업 수행 실패

reject('죄송합니다. 다음에 봅시다.');

}

});

}

/*

true 일 때

'오늘 시간 괜찮습니다.'

false 일 때

'죄송합니다. 다음에 봅시다.'

*/

promise(false).then(results => {

// 비동기 작업 수행 성공 시

console.log(results);

}).catch( err => {

// 비동기 작업 수행 실패 시 catch

console.log(err);

})

Promise 구문은 new Promise(excutor) 이며, 매개 변수로는 resolve와 reject를 가진다. Promise 생성 시 resolve와 reject 함수를 받아 즉시 실행되며, 비동기 작업 성공 시 resolve를 호출, 실패 시 reject를 호출해 다음 작업을 수행한다. 

Promise는 실행한 비동기 연산이 성공하였는지 실패하였는지에 대한 상태 정보를 가지고 있다. 상태 정보에 대해 알아보자.

상태	의미	언제
pending	이행되거나 거부되지 않은 초기 상태	fulfilled 또는 rejected가 호출이 안된 상태
fulfilled	연산 성공 상태	fulfilled가 호출된 상태
rejected	연산 실패 상태	rejected가 호출된 상태
settled	연산 성공 또는 실패 된 상태	fulfilled 또는 rejected가 호출된 상태

Promise는 후속 처리 메소드 then, catch 두 가지를 가지고 있다. 

then은 두 개의 콜백 함수(onFulfilled, onRejected)를 인자로 전달 받는다. Promise에 이행 또는 거부 처리기를 추가하고 호출된 처리값 반환 또는 처리가 되지 않았을 시 원래 처리된(settled) 값으로 결정하는 새로운 promise를 반환한다. 

catch는 하나의 콜백 함수(onRejected)를 인자로 전달 받는다. promise에 거부 처리기를 추가하고 호출된 처리기에 반환값 또는 프로미스가 처리되지 않은 경우 원래 처리된(settled) 값으로 결정하는 새로운 promise를 반환한다.

이 모든 것의 과정을 설명해 보여주는 그림은 아래와 같다.

<첨부: Mozilla Promise 그림 참고>

Promise는 4가지 메소드를 가지고 있다.

1. Promise.all (iterable)

iterable 내에 모든 Promise를 이행한 뒤 어떤 Promise가 거부하면 즉시 거부하는 Promise를 반환한다. 결국 iterable 내에 있는 Promise 는 병렬로 모두 수행되고 resolve 하는 새로운 Promise를 반환한다.

Promise.all([

new Promise(resolve => setTimeout(() => resolve('내일도'), 1000)), // 내일도

new Promise(resolve => setTimeout(() => resolve('코딩 공부'), 2000)), // 코딩 공부

new Promise(resolve => setTimeout(() => resolve('해야지'), 3000)) // 해야지

]).then(console.log) // [ '내일도', '코딩 공부', '해야지']

.catch(console.log);

위의 예시는 총 3초 후 모든 값을 반환한다. 이 말은 즉 3개의 setTimeout 메서드가 실행되고 모두 이행 완료 하였을 때 값을 하나의 배열에 모아 return 한다.

2. Promise.race (iterable)

iterable 내의 어떤 Promise가 이행하거나 거부하는 즉시 스스로 이행하거나 거부하는 Promise를 반환한다. 가장 먼저 처리된 Promise가 resolve한 결과를 새로운 Promise를 반환한다.

Promise.race([

new Promise(resolve => setTimeout(() => resolve('내일도'), 1000)), // 내일도

new Promise(resolve => setTimeout(() => resolve('코딩 공부'), 2000)), // 코딩 공부

new Promise(resolve => setTimeout(() => resolve('해야지'), 3000)) // 해야지

]).then(console.log) // 내일도

.catch(console.log);

3. Promise.reject(reason)

어떠한 이유로 거부하는지 Promise로 반환한다.

const rejectedPromise = Promise.reject(new Error('Error'));

rejectedPromise.catch(console.log); // Error

4. Promise.resolve(value)

주어진 값으로 다음을 진행하는 Promise 객체를 반환한다. 값이 then 가능한 경우, 반환된 Promise는 then을 따라 마지막까지 상태를 취하며, 아닌 경우 반환된 Promise는 주어진 값으로 이행한다.

const resolvedPromise = Promise.resolve(['내일도', '코딩 공부', '해야지']);

resolvedPromise.then(console.log); // [ '내일도', '코딩 공부', '해야지' ]

감사합니다.

오늘도 해피 코딩하세요 !