この記事では、Angular の HttpClientModule モジュールを理解し、リクエスト メソッド、リクエスト パラメーター、応答コンテンツ、インターセプター、Angular プロキシ、およびその他の関連知識を紹介します。
このモジュールはHttpリクエストの送信に使用され、リクエストの送信に使用されるメソッドはObservableオブジェクトを返します。 【おすすめ関連チュートリアル：「angularチュートリアル」】
1)、HttpClientModuleモジュールを導入します
// app.module.ts
import { httpClientModule } から '@angular/common/http';
輸入品: [
httpクライアントモジュール
】2) リクエストを送信するための HttpClient サービス インスタンス オブジェクトを挿入します。
// app.component.ts
import { HttpClient } から '@angular/common/http';
エクスポート クラス AppComponent {
コンストラクター(プライベート http: HttpClient) {}
}3)、リクエストを送信
import { HttpClient } from "@angular/common/http"
エクスポート クラス AppComponent は OnInit を実装します {
コンストラクター(プライベート http: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsers() {
return this.http.get("https://jsonplaceholder.typicode.com/users")
}
}this.http.get(url [, オプション]); this.http.post(url, データ [, オプション]); this.http.delete(url [, オプション]); this.http.put(url, データ [, オプション]);
this.http.get<Post[]>('/getAllPosts')
.subscribe(response => console.log(response))1. HttpParams クラス
エクスポート宣言クラス HttpParams {
コンストラクター(オプション?: HttpParamsOptions);
has(パラメータ:文字列):ブール値;
get(パラメータ: 文字列): 文字列 |
getAll(パラメータ: 文字列): 文字列[] |
キー(): 文字列[];
append(パラメータ: 文字列、値: 文字列): HttpParams;
set(パラメータ: 文字列、値: 文字列): HttpParams;
delete(param: 文字列, 値?: 文字列): HttpParams;
toString(): 文字列;
}2. HttpParamsOptions インターフェイス
インターフェイス HttpParamsOptions を宣言します {
fromString?: 文字列;
fromObject?: {
[パラメータ: 文字列]: 文字列読み取り専用配列<文字列>;
};
エンコーダ?: HttpParameterCodec;
}3. 使用例
import { HttpParams } from '@angular/common/http';
let params = new HttpParams({ fromObject: {名前: "zhangsan", 年齢: "20"}})
params = params.append("性別", "男性")
let params = new HttpParams({ fromString: "name=zhangsan&age=20"})リクエストヘッダーフィールドの作成には、HTTPheadersクラスの使用が必要です。
エクスポート宣言クラス HttpHeaders {
コンストラクター(ヘッダー?: 文字列 | {
[name: string]: string | string[];
});
has(name: string): boolean;
get(name: string): string | null;
キー(): 文字列[];
getAll(name: string): string[] | null;
append(name: string, value: string | string[]): HttpHeaders;
set(name: string, value: string | string[]): HttpHeaders;
delete(name: string, value?: string | string[]): HttpHeaders;
} let headers = new HttpHeaders({ test: "Hello" })declare type HttpObserve = 'body' | 'response'; // レスポンスは完全なレスポンスボディを読み取ります // ボディはサーバーから返されたデータを読み取ります
this.http.get(
"https://jsonplaceholder.typicode.com/users",
{ 観察: "本体" }
).subscribe(console.log)インターセプターは、Angular アプリケーションで HTTP リクエストとレスポンスをグローバルにキャプチャして変更する方法です。 （Token、Error）
拦截器将只拦截使用HttpClientModule 模块发出的请求。
ng g interceptor <name>
6.1 リクエストの傍受
@Injectable()
エクスポート クラス AuthInterceptor は HttpInterceptor を実装します {
コンストラクター() {}
//インターセプトメソッド intercept(
//不明リクエストのタイプを指定しますボディ（ボディ）リクエスト：httprequest <unknown>、
次へ: HttpHandler
// unknown 指定响应内容 (body) 的类型 ): Observable<HttpEvent<unknown>> {
// リクエストヘッダーのクローンを作成して変更します const req = request.clone({
setHeaders: {
権限：「ベアラーxxxxxxx」
}
})
// コールバック関数 return next.handle(req) を通じて、変更されたリクエスト ヘッダーをアプリケーションに返します。
}
}6.2 応答の傍受
@Injectable()
エクスポート クラス AuthInterceptor は HttpInterceptor を実装します {
コンストラクター() {}
//インターセプトメソッド intercept(
request: HttpRequest<unknown>,
次へ: HttpHandler
): 観察可能な<任意> {
return next.handle(request).pipe(
再試行(2)、
catchError((エラー: HttpErrorResponse) => throwError(エラー))
)
}
}6.3 拦截器注入
import { AuthInterceptor } from "./auth.interceptor"
「@angular/common/http」から { HTTP_INTERCEPTORS } をインポートします
@NgModule({
プロバイダー: [
{
提供: HTTP_INTERCEPTORS、
useClass: AuthInterceptor、
マルチ: true
}
】
})1. プロジェクトのルート ディレクトリに proxy.conf.json ファイルを作成し、次のコードを追加します。
{
"/api/*": {
"ターゲット": "http://localhost:3070",
「安全」: false、
"changeOrigin": true
}
}/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オブジェクトを返します。