반응형
이번 11편에서는 비동기 처리와 Promise를 다룰 때 유용한 실무형 유틸 함수들을 정리합니다. 네트워크 요청, 타이머 제어, 에러 핸들링 등 비동기 작업을 보다 효율적으로 관리할 수 있습니다.
✅ 1. delay (비동기 지연)
📌 주어진 시간(ms) 만큼 지연시키는 Promise
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
📌 활용 예시
- 테스트용 대기 시간 삽입
- 네트워크 요청 간 지연
✅ 2. retry (재시도 로직)
📌 실패 시 최대 N번까지 재시도
async function retry(fn, retries = 3, delayTime = 1000) {
try {
return await fn();
} catch (err) {
if (retries <= 0) throw err;
await delay(delayTime);
return retry(fn, retries - 1, delayTime);
}
}
📌 활용 예시
- 네트워크 불안정 대비
- 외부 API 호출 안정화
✅ 3. timeout (타임아웃 처리)
📌 주어진 시간 안에 완료되지 않으면 에러 발생
function timeout(promise, ms) {
return Promise.race([
promise,
new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), ms))
]);
}
📌 활용 예시
- API 요청 타임아웃 설정
- 사용자 입력 대기 시간 제한
✅ 4. allSettled Polyfill (모든 Promise 결과 수집)
📌 모든 Promise의 성공/실패 여부를 반환
function allSettled(promises) {
return Promise.all(promises.map(p =>
p.then(value => ({ status: 'fulfilled', value }))
.catch(reason => ({ status: 'rejected', reason }))
));
}
📌 활용 예시
- 일부 실패를 허용하는 병렬 작업 처리
- 배치 작업 결과 수집
✅ 5. withTimeout (Promise + Timeout 결합 헬퍼)
📌 비동기 작업에 타임아웃 쉽게 적용
async function withTimeout(fn, ms) {
return timeout(fn(), ms);
}
📌 활용 예시
- fetch, axios 요청에 타임아웃 적용
- 긴 작업에 실패 안전장치 추가
✅ 결론
비동기 처리 로직은 현대 웹 애플리케이션의 핵심입니다. 이번 시리즈에서 다룬 유틸 함수들을 활용하면 복잡한 비동기 흐름을 안정적이고 견고하게 관리할 수 있습니다.
반응형
'Programing > javascript' 카테고리의 다른 글
자바스크립트 실무 유틸 함수 시리즈 15 - 폼 입력 검증을 위한 유틸 (1) | 2025.05.01 |
---|---|
자바스크립트 실무 유틸 함수 시리즈 14 - 반응형 UI 구현을 위한 유틸 (0) | 2025.05.01 |
자바스크립트 실무 유틸 함수 시리즈 13 - 프론트엔드 성능 측정을 위한 간단한 유틸 (0) | 2025.05.01 |
자바스크립트 실무 유틸 함수 시리즈 12 - 배열 고차 함수(map, filter, reduce) (0) | 2025.05.01 |
자바스크립트 실무 유틸 함수 시리즈 10 - 함수형 프로그래밍(FP) 스타일 (0) | 2025.04.29 |
자바스크립트 실무 유틸 함수 시리즈 9 - Object 객체 고급 조작 (0) | 2025.04.29 |
자바스크립트 실무 유틸 함수 시리즈 8 - 배열 고급 조작 (0) | 2025.04.29 |
자바스크립트 실무 유틸 함수 시리즈 7 - 문자열 정규 표현식 (0) | 2025.04.29 |