Angular에서 HTTP 요청을 재시도하는 방법(많은 코드 예제 포함)

실패한 HTTP 요청을 어떻게 정상적으로 처리합니까?

다음은 HTTP 실패를 관리하는 데 사용할 수 있는 몇 줄의 Angular 코드입니다.

일부 Angular 앱은 축구를 하는 코끼리처럼 서툴 수 있습니다. 실패하면 HARD로 떨어집니다.



그리고 다른 사람들은 머리를 숙이는 록스타처럼 민첩합니다.



HTTP 실패를 정상적으로 처리하여 Angular 웹 앱을 더 민첩하고 강력하게 만드는 방법을 알고 싶으십니까? 읽어.

HTTP 인터셉터로 시작합니다.

Angular 프로젝트에서 터미널을 열고 Angular CLI과 같이 채웁니다.

ng generate interceptor monitor

그런 다음 providers 배열에 추가하여 모듈 파일로 가져옵니다.

providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: MonitorInterceptor, 
      multi: true
    }
]

실패한 요청을 재시도하기 위해 인터셉터 사용

다음으로 새monitor.interceptor.ts 파일을 엽니다. 다음과 같아야 합니다.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

이미 알고 있듯이 이 인터셉터를 사용하여 들어오거나 나가는 HTTP 요청을 수정할 수 있습니다.

Angular 인터셉터의 이점을 어떻게 얻습니까? 답은 간단합니다.

재시도 기능을 추가하기 위해 Observable이 실패할 때 재시도를 트리거하는 retry 함수를 사용합니다.

버스터를 수행하는 방법은 다음과 같습니다.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { retry } from 'rxjs/operators';

export const retryCount = 3;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      retry(retryCount)
    )
  }
}

이제 HTTP 요청이 실패하면 해당 요청을 3번 더 재시도합니다.

특정 응답 상태 코드에 대해 어떻게 재시도합니까?

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { concatMap, delay, retryWhen } from 'rxjs/operators';

export const retryCount = 3;
export const retryWaitMilliSeconds = 1000;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      retryWhen(error => 
        error.pipe(
          concatMap((error, count) => {
            if (count <= retryCount && error.status == 503) {
              return of(error);
            }
            return throwError(error);
          }),
          delay(retryWaitMilliSeconds)
        )
      )
    )
  }
}

토큰 새로 고침과 같은 재인증 절차 후 요청을 어떻게 재전송합니까?

서버가 401로 응답할 때 시나리오를 어떻게 처리합니까? 그리고 일종의 로그인 또는 토큰 새로 고침을 수행해야 합니까?

코드는 다음과 같습니다.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';

export const retryCount = 3;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(catchError(error => {
        if (error.status === 401) {
          return this.reAuthenticate().pipe(
            switchMap(() => next.handle(request))
          )
        }
        return throwError(error);
      })
    )
  }

  reAuthenticate(): Observable<any> {
    // Do your auth call here
  }
}

보다 정교한 예제here를 찾을 수 있습니다.

결론

이 가이드에서는 실패한 HTTP 요청을 정상적으로 처리하는 다양한 방법을 살펴보았습니다.

우아하게 실패하는 것은 눈을 뗄 가치가 없는 작은 세부 사항처럼 보일 수 있지만 제대로 수행되면 사용자는 감사할 것입니다.

질문이나 의견이 있으십니까? 주저하지 말고 찔러주세요.