Programing/javascript

자바스크립트 실무 유틸 함수 시리즈 11 - 비동기 처리 및 Promise 관련

Dongkkase 2025. 4. 29. 20:40
반응형

이번 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 요청에 타임아웃 적용
  • 긴 작업에 실패 안전장치 추가

✅ 결론

비동기 처리 로직은 현대 웹 애플리케이션의 핵심입니다. 이번 시리즈에서 다룬 유틸 함수들을 활용하면 복잡한 비동기 흐름을 안정적이고 견고하게 관리할 수 있습니다.

반응형