Angular의 HTTP 요청

HTTP 요청

Angular는 http 요청을 처리하는 자체 모듈을 제공합니다.
이를 사용하려면 app.module.ts 파일에서 HttpClientModule 모듈을 가져온 다음 http 모듈을 사용하려는 서비스 또는 모듈에서 서비스 HttpClient를 가져와야 합니다.

Angular의 http 모듈은 Observable 객체를 반환하므로 요청 결과를 사용하려면 데이터에 액세스하기 위해 subscribe 메서드를 사용해야 합니다.

  fetchProduct() {
    this.productsService.getAllProducts().subscribe((products) => {
      this.products = products;
    });
  }

메서드 이름 옆에 원하는 유형을 선언하여 http 요청의 응답을 쉽게 매핑할 수 있습니다.

  getAllProducts() {
    return this.http.get<Product[]>(environment.url_api);
  }

이전 접근 방식은 많은 시나리오에 적용될 수 있습니다.

GET 메서드

  getProduct(id: string) {
    return this.http.get<Product>(`${environment.url_api}${id}`);
  }

POST 방식

export interface Product {
  id: string;
  title: string;
  price: string;
  images: string[];
  description: string;
  category: Category;
}

export interface CreateProductDTO extends Omit<Product, 'id'. 'category'> {
  categoryId: number;
}

  createProduct(body: CreateProductDTO) {
    return this.http.post<Product>(environment.url_api, body);
  }

PUT PATCH 방법

export interface UpdateProductDTO extends Partial<CreateProductDTO> {
}

  updateProduct(id: string, body: UpdateProductDTO) {
    return this.http.put<Product>(`${environment.url_api}${id}`, data);
  }

DELETE 메서드

  deleteProduct(id: string) {
    return this.http.delete<boolean>(`${environment.url_api}${id}`);
  }

URL 매개변수

  getProductsByPage(limit: number, offset: number) {
    return this.http.get<Products[]>(`${environment.url_api}`, {
      params : { limit, offset }
    });
  }

다음과 같이 HttpParams 클래스를 사용하여 프로그래밍 방식으로 매개 변수를 만들 수도 있습니다.

  getProductsByPage(limit?: number, offset?: number) {
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit);
      params = params.set('offset', offset)
    }
    return this.http.get<Products[]>(`${environment.url_api}`, {
      params
    });
  }

HTTP 응답 입력

인터페이스를 사용하여 API에서 오는 응답에 유효한 데이터 유형을 할당할 수 있습니다. 이는 특정 형식 문제를 방지하는 좋은 방법입니다.

HTTP 응답을 입력하는 방법을 보여주는 예로 다음 인터페이스에 주목해 보겠습니다.

interface User {
  gender: string;
  email: string;
  phone: string;
}

사용자 인터페이스는 다음과 같이 사용할 수 있습니다.

myFunction(): Observable<User[]>{
    return this.http.get("URL").pipe(
        map(
            (response:any) => response.results as User[]
            ))
}

오류 처리

this.http.get().pipe(
  retry(3), // try again 3 times
  catchError((error: HttpErrorResponse) => {
    // error.status HttpStatusCode
    return throwError("mensaje de error");
  })
  //normal flow
);

오류 발생을 즉시 방지하기 위해 재시도 연산자를 사용합니다. 대신 3번 시도하고 성공하지 못한 경우 catchError 연산자를 호출하여 예외를 처리합니다.

파일 다운로드

getFile(){
    return this.http.get('URL.txt', {responseType:'text'})
        .subscribe(content => {})
}

구독 방법 내에서 창을 여는 방법이나 다른 기능을 처리하여 파일을 저장하는 기능을 사용할 수 있습니다.

인터셉터

인터셉터는 토큰 주입 또는 헤더 추가와 같이 HTTP 요청에 속성을 추가하는 데 사용되는 사용자 지정 서비스입니다.

인증 인터셉터를 만드는 단계

명령을 사용하여 서비스를 생성합니다. ng g의 인증

서비스의 이름을 auth.interceptor.ts로 바꾸고 방금 변경한 이름과 관련된 명령을 리팩터링합니다.

provideIn:'root' 줄을 제거하십시오. 이 줄은 auth.interceptor.ts 내부에서 찾을 수 있습니다. 이 새로운 서비스가 앱 전체에서 사용 가능한 것을 피하고 싶지만 사용을 제한하고 싶기 때문에 이 줄을 제거해야 합니다. 특정 시나리오.

새로운 인터셉터 클래스는 HttpInterceptor를 구현해야 합니다.

우리의 로직은 메소드 인터셉트에서 구현될 것입니다.

app.module.ts에서 새로운 인터셉터 클래스를 공급자로 수동으로 설정합니다.

// auth.interceptor.ts
export class AuthInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        myToke: "1234",
      },
    });
    return next.handle();
  }
}

// app.module.ts
import { HTTP_INTERCEPTORS } from "@angular/common/http";
//import AuthInterceptor

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

참고: 인터셉터를 사용하여 토큰을 저장하려면 localStorage보다 indexDb를 사용하여 저장하는 것이 좋습니다.

데이터를 저장하기 위해 localStorage 또는 다른 로컬 기술에 토큰이나 일부 값을 저장하려는 경우 다음과 같이 진행할 수 있습니다.

loginRestAPI(email:string, password: string){
    return this.http.post('URL',{email, password}).pipe(tap(dat) => {
        //store in local storage or any other strategy
    });
}

최신 버전의 Angular에서는 ng g 인터셉터 auth 명령을 사용하는 것이 좋습니다.