각도 학습의 HttpClientModule 모듈에 대한 간략한 분석

이 기사에서는 각도의 HttpClientModule 모듈을 이해하고 요청 방법, 요청 매개변수, 응답 내용, 인터셉터, Angular 프록시 및 기타 관련 지식을 소개합니다.

이 모듈은 Http 요청을 보내는 데 사용되며 요청을 보내는 데 사용되는 메서드는 Observable 개체를 반환합니다. [관련 추천 튜토리얼: "Angular 튜토리얼"]

1. 빠른 시작

1) HttpClientModule 모듈을 소개합니다.

 // app.module.ts
import { httpClientModule } from '@angular/common/http';
수입품: [
http클라이언트모듈
]

2) 요청 전송을 위해 HttpClient 서비스 인스턴스 객체를 삽입합니다.

 // app.comComponent.ts
'@angular/common/http'에서 { HttpClient }를 가져옵니다.

내보내기 클래스 AppComponent {
	생성자(비공개 http: HttpClient) {}
}

3) 요청 보내기

 "@angular/common/http"에서 { HttpClient } 가져오기

내보내기 클래스 AppComponent는 OnInit {를 구현합니다.
생성자(비공개 http: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsers() {
return this.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. 요청방법

 this.http.get(url [, 옵션]);
this.http.post(url, data [, options]);
this.http.delete(url [, 옵션]);
this.http.put(url, data [, options]);

 this.http.get<포스트[]>('/getAllPosts')
.subscribe(응답 => console.log(응답))

3. 요청 매개변수

1. HttpParams 클래스

 내보내기 선언 클래스 HttpParams {
생성자(옵션?: HttpParamsOptions);
has(param: string): 부울;
get(param: 문자열): 문자열 |
getAll(param: 문자열): 문자열[] | null;
키(): 문자열[];
추가(매개변수: 문자열, 값: 문자열): HttpParams;
set(param: 문자열, 값: 문자열): HttpParams;
delete(param: 문자열, 값?: 문자열): HttpParams;
toString(): 문자열;
}

2. HttpParamsOptions 인터페이스

 인터페이스 HttpParamsOptions {를 선언합니다.
fromString?: 문자열;
fromObject?: {
[매개변수: 문자열]: 문자열 | ReadonlyArray<string>;
};
인코더?: HttpParameterCodec;
}

3. 사용예

 '@angular/common/http'에서 { HttpParams }를 가져옵니다.

let params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("섹스", "남성")
let params = new HttpParams({ fromString: "name=zhangsan&age=20"})

4. 요청 헤더

요청 헤더 필드를 생성하려면 HttpHeaders 클래스를 사용해야 합니다. 클래스 인스턴스 객체 아래에 요청 헤더를 작동하는 다양한 방법이 있습니다.

 내보내기 선언 클래스 HttpHeaders {
생성자(헤더?: 문자열 | {
[이름: 문자열]: 문자열 | 문자열[];
});
has(이름: 문자열): 부울;
get(이름: 문자열): 문자열 |
키(): 문자열[];
getAll(이름: 문자열): 문자열[] | null;
추가(이름: 문자열, 값: 문자열 | 문자열[]): HttpHeaders;
set(이름: 문자열, 값: 문자열 | 문자열[]): HttpHeaders;
delete(이름: 문자열, 값?: 문자열 | 문자열[]): HttpHeaders;
}

 let headers = new HttpHeaders({ 테스트: "Hello" })

5. 응답 내용

 선언 유형 HttpObserve = 'body' |
// 응답은 전체 응답 본문을 읽습니다. // 본문은 서버에서 반환한 데이터를 읽습니다.

 this.http.get(
"https://jsonplaceholder.typicode.com/users",
{ 관찰: "본체" }
).구독(console.log)

6. 인터셉터

인터셉터는 Angular 애플리케이션에서 HTTP 요청 및 응답을 전역적으로 캡처하고 수정하는 방법입니다. (토큰, 오류)

인터셉터는 HttpClientModule 모듈을 사용하여 이루어진 요청만 가로챕니다.

ng g interceptor <name>

6.1 요청 차단

 @주사 가능()
내보내기 클래스 AuthInterceptor는 HttpInterceptor를 구현합니다.
생성자() {}
	//차단 방법 Intercept(
// 알 수 없음은 요청 본문(body)의 유형을 지정합니다. 요청: HttpRequest<unknown>,
다음: HttpHandler
// 알 수 없음은 응답 콘텐츠(본문)의 유형을 지정합니다.): Observable<HttpEvent<unknown>> {
// 요청 헤더를 복제하고 수정합니다. const req = request.clone({
setHeaders: {
승인: "전달자 xxxxxxx"
}
})
// 수정된 요청 헤더를 콜백 함수를 통해 애플리케이션에 다시 전달합니다. return next.handle(req)
}
}

6.2 응답 가로채기

 @주사 가능()
내보내기 클래스 AuthInterceptor는 HttpInterceptor를 구현합니다.
생성자() {}
	//차단 방법 Intercept(
요청: HttpRequest<알 수 없음>,
다음: HttpHandler
): 관찰 가능<모든> {
return next.handle(요청).pipe(
재시도(2),
catchError((오류: HttpErrorResponse) => throwError(error))
)
}
}

6.3 인터셉터 주입

 "./auth.interceptor"에서 { AuthInterceptor } 가져오기
"@angular/common/http"에서 { HTTP_INTERCEPTORS } 가져오기

@NgModule({
제공업체: [
{
제공: HTTP_INTERCEPTORS,
useClass: 인증 인터셉터,
멀티: 사실
}
]
})

7. 각도 프록시

1. 프로젝트의 루트 디렉터리에 Proxy.conf.json 파일을 생성하고 다음 코드를 추가합니다.

 {
"/api/*": {
"대상": "http://localhost:3070",
"보안": 거짓,
"changeOrigin": 참
}
}

• /api/*: 애플리케이션에서 /api로 시작하는 요청이 이 프록시를 통과합니다.

• 대상: 서버측 URL

• secure: 서버 측 URL의 프로토콜이 https인 경우 이 항목은 true여야 합니다.

• ChangeOrigin: 서버가 localhost가 아닌 경우 이 항목은 true여야 합니다.

2. 프록시 구성 파일 지정(방법 1)

 "스크립트": {
"start": "ng Serve --proxy-config Proxy.conf.json",
}

3. 프록시 구성 파일 지정(방법 2)

 "제공하다": {
"옵션": {
"proxyConfig": "proxy.conf.json"
}, 

이 모듈은 Http 요청을 보내는 데 사용되며 요청을 보내는 데 사용되는 메서드는 Observable 개체를 반환합니다.