3.1 Promise 체인 만들기
Promise 체인은 여러 비동기 작업을 순차적으로 수행하고, 한 작업의 결과를 다음 작업에 전달할 수 있게 해줘. 그래서 코드가 읽기 쉬워지고 관리하기도 좋아. 또한, Promise는 에러 처리를 강력하게 지원해서 안정적이고 오류에 강한 애플리케이션을 만들 수 있어.
기본 개념
Promise 체인은 then 메소드에서 새로운 Promise를 반환하면서 만들어져. 각 then 메소드는 새로운 Promise를 반환해서, 비동기 작업을 연달아 수행할 수 있게 해줘.
간단한 Promise 체인 예제
이 예제에서 각 then 메소드는 자신의 작업을 수행하고 그 결과를 다음 then 메소드에 전달해.
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Step 1 completed');
}, 1000);
});
promise
.then((result) => {
console.log(result); // 출력: Step 1 completed
return 'Step 2 completed';
})
.then((result) => {
console.log(result); // 출력: Step 2 completed
return 'Step 3 completed';
})
.then((result) => {
console.log(result); // 출력: Step 3 completed
})
.catch((error) => {
console.error(error);
});
비동기 작업과 함께하는 체인 예제
이 예제에서는 각 then 메소드가 다음 단계가 실행되기 전에 비동기 작업이 완료되기를 기다려:
function asyncOperation(step) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${step} completed`);
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result); // 출력: Step 1 completed
return asyncOperation('Step 2');
})
.then((result) => {
console.log(result); // 출력: Step 2 completed
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // 출력: Step 3 completed
})
.catch((error) => {
console.error(error);
});
3.2 Promise 체인에서 에러 처리
catch 메소드는 Promise 체인의 에러를 처리하는 데 사용돼. Promise 중 하나에서 에러가 발생하면, 그 에러는 가까운 catch 메소드로 전달돼. 덕분에 에러를 중앙집중적으로 처리할 수 있어서 코드의 가독성과 유지보수가 향상돼.
에러 처리 예제
이 예제에서는 Step 2에서 발생한 에러가 catch 메소드에 의해 처리되고, 이후의 then 메소드는 실행되지 않아:
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2', true); // 이 작업은 에러가 날 거야
})
.then((result) => {
console.log(result); // 이 코드는 실행되지 않아
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // 이 코드는 실행되지 않아
})
.catch((error) => {
console.error('Error:', error); // 출력: Error: Step 2 failed
});
특정 단계에서의 에러 처리
때로는 전체 체인을 중단하지 않고 특정 단계에서 에러를 처리해야 할 때가 있어. 이럴 때는 then과 catch 메소드를 중첩해서 사용할 수 있어.
특정 단계에서의 에러 처리 예제
이 예제에서는 Step 2에서의 에러가 로컬에서 처리되고, 체인이 복구된 값과 함께 계속 실행돼:
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2', true).catch((error) => {
console.warn('Handled error in Step 2:', error);
return 'Recovered from Step 2 error';
});
})
.then((result) => {
console.log(result); // 출력: Recovered from Step 2 error
return asyncOperation('Step 3');
})
.then((result) => {
console.log(result); // 출력: Step 3 completed
})
.catch((error) => {
console.error('Error:', error); // 이 코드는 실행되지 않아
});
3.3 finally 사용하기
finally 메소드는 Promise가 성공적으로 끝나든 에러가 발생하든 상관없이 코드를 실행해. 자원을 정리하는 등의 마무리 작업을 수행하는 데 유용해.
finally 사용 예제:
function asyncOperation(step, shouldFail = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(`${step} failed`);
} else {
resolve(`${step} completed`);
}
}, 1000);
});
}
asyncOperation('Step 1')
.then((result) => {
console.log(result);
return asyncOperation('Step 2');
})
.then((result) => {
console.log(result);
return asyncOperation('Step 3');
})
.catch((error) => {
console.error('Error:', error);
})
.finally(() => {
console.log('All operations completed'); // 이 코드는 무조건 실행돼
});
이 예제에서는 finally 메소드가 에러 발생 여부에 상관없이 무조건 실행돼.
GO TO FULL VERSION