자바스크립트는 비동기 처리를 위해 콜백 함수를 사용합니다. 하지만 콜백 함수 호출이 중첩되어 복잡도가 높아지는 콜백 헬(콜백 지옥) 현상이 발생합니다.
에러 처리 역시 곤란하다는 문제가 있습니다. 이를 극복하기 위해 ES6에서 Promise가 도입되었습니다.
프로미스(Promise)
Promise는 자바스크립트에서 비동기 작업을 하는 객체입니다.
프로미스의 상태
- 대기(pending): 비동기 작업이 아직 완료되지 않은 상태로, 예를 들어 서버에서 데이터를 가져오는 작업이 진행 중일 때를 의미합니다. 이 상태에서 성공(이행) 또는 실패(거부)로 전환됩니다.
- 이행(fulfilled): 동기 작업이 성공적으로 완료되었을 때,
resolve()가 호출되며 이 상태로 전환됩니다. 이때 결과값이then()메서드로 전달됩니다. - 거부(rejected): 비동기 작업이 실패했을 때,
reject()가 호출되어 이 상태가 됩니다. 오류 메시지는catch()메서드로 전달됩니다.
대기(Pending)
const promise = new Promise((resolve, reject) => {
// 비동기 작업이 완료되지 않음
});생성된 직후의 Promise는 기본적으로 대기(pending) 상태입니다. 이후 비동기 처리가 수행되면 비동기 처리 결과에 따라 Promise의 상태가 변경됩니다.
이행(Fulfilled)
const promise = new Promise((resolve, reject) => {
resolve('Success!');
});
promise.then(result => {
console.log(result); // 'Success!'
});resolve()가 호출되어 작업이 성공적으로 완료된 경우입니다.
거부(Rejected)
const promise = new Promise((resolve, reject) => {
reject('Failed!');
});
promise.catch(error => {
console.error(error); // 'Failed!'
});reject()가 호출되어 작업이 실패한 경우입니다.
후속 처리 메서드
프로미스로 구현된 비동기 함수를 호출하는 측에서는 프로미스 객체의 후속 처리 메소드(then, catch)를 통해 비동기 처리 결과 또는 에러 메세지를 전달받아 처리합니다.
then
- 첫 번째 콜백 함수는
Promise가 fulfilled 상태가 되면 호출됩니다. 콜백 함수는Promise의 비동기 처리 결과를 인수로 전달받습니다. - 두 번째 콜백 함수는
Promise가 rejected 상태가 되면 호출됩니다. 콜백 함수는Promise의 에러를 인수로 전달받습니다.
즉, 첫 번째 콜백 함수는 비동기 처리가 성공했을 때, 두 번째 콜백 함수는 비동기 처리가 실패했을 때 호출되는 콜백 함수입니다.
catch
catch 메서드는 한 개의 콜백 함수를 인수로 전달받고, Promise가 rejected 상태인 경우만 호출됩니다.
finally
finally 메서드는 Promise의 성공 또는 실패와 상관없이 무조건 한 번 호출됩니다. Promise 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 사용합니다.
에러 처리
then()의 두 번째 인자로 에러를 처리
const promise = new Promise((resolve, reject) => {
const success = false;
if (success) {
resolve('작업 성공');
} else {
reject('작업 실패');
}
});
promise.then(
result => {
console.log(result); // 성공 시 출력
},
error => {
console.error(error); // 에러 발생 시 출력
}
);catch()를 이용
const promise = new Promise((resolve, reject) => {
const success = false;
if (success) {
resolve('작업 성공');
} else {
reject('작업 실패');
}
});
promise
.then(result => {
console.log(result); // 성공 시 출력
})
.catch(error => {
console.error(error); // 에러 발생 시 출력
}); ❗️ catch()를 사용하는 방법이 더 명학하고 직관적이기 때문에 일반적으로 많이 사용합니다.
프로미스 체이닝(Promise Chaining)
프로미스 체이닝(Promise Chaining)은 여러 개의 비동기 작업을 순차적으로 처리할 수 있게 해주는 패턴입니다. 이를 통해 각 비동기 작업이 이전 작업의 결과를 기반으로 실행될 수 있으며, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.
const promise = (result) => {
return new Promise((resolve, reject) => {
if(result == 'success')
resolve('success')
else
reject('failed')
})
}
promise('success')
.then(promise) // .then(result => promise(result))
.then(message => console.log('This is in the then ' + message))
.catch(error => console.log('This is in the catch ' + error))프로미스 체이닝은 비동기 작업을 순차적으로 처리하면서 코드의 가독성과 유지보수성을 향상시키는 강력한 패턴입니다. 이를 통해 복잡한 비동기 로직을 명확하고 체계적으로 관리할 수 있으며, 에러 처리를 일관되게 수행할 수 있습니다.
✅ 참고
- 모던 자바스크립트 Deep Dive
- 캡틴판교 블로그
- MDN_ Promise
- 만자의 개발일지
