수정하기 - switchMap을 사용한 API 에러 핸들링 예시는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

switchMap을 사용한 API 에러 핸들링 예시에 대해서 자세히 설명드리겠습니다.    RxJS에서 `switchMap` 연산자는 내부 Observable이 바뀔 때 이전 Observable을 취소하고 최신 Observable만 구독하는 기능을 합니다. 이를 통해 API 호출 같은 비동기 작업을 할 때 “이전 요청은 무시하고 최신 요청 결과만 반영”하는 로직을 쉽게 구현할 수 있습니다.    하지만 API 요청 중 에러가 발생할 수 있기 때문에 에러를 적절하게 핸들링하는 것이 중요합니다. `switchMap` 안에서 API 호출 Observable에 대해 `catchError`를 사용해서 에러를 잡는 식으로 구현합니다.    아래는 `switchMap`을 사용한 API 호출과 그 안에서의 에러 핸들링 예시입니다. 가독성을 높이고 경향적인 코드를 주석과 함께 설명하겠습니다.    ---      예시 시나리오:      사용자가 입력한 검색어가 변경될 때마다 API를 호출하여 검색 결과를 가져오는데, API 요청 중 에러가 발생하면 사용자에게 에러 메시지를 보여주고 빈 결과를 반환한다.    ```typescript  import { of, Subject } from 'rxjs';  import { switchMap, debounceTime, distinctUntilChanged, catchError } from 'rxjs/operators';    // 가상의 API 함수: 입력 문자열을 받아서 Observable로 결과 반환  function searchApi(query: string) {    return new Observable(observer => {      // 실제로는 HttpClient.get() 같은 API 호출이 들어감      // 여기서는 예시를 위해 1초 후 결과를 반환하거나 에러도 반환하도록 함      setTimeout(() => {        if (query === 'error') {          observer.error(new Error('API 요청 실패!'));        } else {          observer.next(['result1', 'result2', 'result3'].map(r => `${r} for ${query}`));          observer.complete();        }      }, 1000);    });  }    // 사용자 검색어 입력감지용 Subject  const searchInput$ = new Subject<string>();    // 검색어가 변경되면 API 호출하고 에러 처리까지 하는 스트림  const results$ = searchInput$.pipe(    debounceTime(300),               // 사용자가 멈출 때까지 300ms 대기    distinctUntilChanged(),          // 같은 값은 무시    switchMap(query =>       searchApi(query).pipe(        catchError(err => {          // 에러를 잡아서 빈 배열을 반환하거나, 별도의 에러 처리 로직 포함 가능          console.error('API 에러 발생:', err.message);          // 사용자에게 보여줄 수 있도록 에러 UI 트리거도 가능          return of([]);  // 빈 결과로 복구        })      )    )  );    // 구독해서 결과를 처리 (예: UI에 출력)  results$.subscribe(results => {    console.log('검색 결과:', results);  });    // 테스트로 검색어 입력 시뮬레이션  searchInput$.next('apple');   // 정상 결과  setTimeout(() => searchInput$.next('error'), 2000); // 에러 발생  setTimeout(() => searchInput$.next('banana'), 4000); // 다시 정상 결과  ```    ---           중요 포인트    1.   API 호출은 `switchMap` 내에서 실행한다:         `switchMap`이 새로운 입력이 들어올 때마다 이전 API 호출 Observable을 취소하고 신규 호출을 실행하게 함.    2.   에러는 `switchMap` 내의 API Observable에 대해 `catchError`로 처리한다:         에러가 발생해도 전체 스트림이 종료되지 않고, 에러를 적절히 잡아서 대체 Observable(빈 배열 반환 등)을 반환한다.    3.   에러 처리 방법:         - `console.error`같이 로그를 남기거나       - 사용자에게 보여줄 별도의 에러 상태를 외부로 노출한 후 UI에서 처리할 수도 있음       - `of([])`처럼 빈결과, 기본값 Observable을 반환해 스트림이 끊기지 않도록 함    4.   기본 RxJS 연산자와 적절한 조합:         - `debounceTime`으로 빠른 연속 입력 억제       - `distinctUntilChanged`로 중복 검색어 무시         5.   사용 사례:   검색, 필터링, 자동완성 API 호출 등 요청이 연속해서 이뤄지고 중간 이전 요청을 무시해야 하는 상황에 적합    ---    이와 같은 방식으로 `switchMap`과 `catchError`를 조합하면 API 호출 중 발생할 수 있는 에러를 효과적으로 처리하면서도 사용자 경험을 저해하지 않는 안정적인 비동기 흐름을 만들 수 있습니다.