Analisis ringkas modul HttpClientModule dalam pembelajaran sudut

Artikel ini akan membawa anda melalui modul HttpClientModule dalam sudut, dan memperkenalkan kaedah permintaan, parameter permintaan, kandungan tindak balas, pemintas, Proksi Sudut dan pengetahuan lain yang berkaitan !

Modul ini digunakan untuk menghantar Http permintaan dan kaedah yang digunakan untuk menghantar permintaan semua mengembalikan Observable objek. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

1. Permulaan pantas

1), memperkenalkan modul HttpClientModule

// app.module.ts
import { httpClientModule } from '@angular/common/http';
imports: [
  httpClientModule
]

2), menyuntik objek contoh perkhidmatan HttpClient, digunakan untuk menghantar permintaan

// app.component.ts
import { HttpClient } from '@angular/common/http';

export class AppComponent {
	constructor(private http: HttpClient) {}
}

3), menghantar permintaan

import { HttpClient } from "@angular/common/http"

export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.getUsers().subscribe(console.log)
  }
  getUsers() {
    return this.http.get("https://jsonplaceholder.typicode.com/users")
  }
}

2

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

this.http.get<Post[]>(&#39;/getAllPosts&#39;)
  .subscribe(response => console.log(response))

3 Parameter permintaan

1 kelas HttpParams

export declare class HttpParams {
    constructor(options?: HttpParamsOptions);
    has(param: string): boolean;
    get(param: string): string | null;
    getAll(param: string): string[] | null;
    keys(): string[];
    append(param: string, value: string): HttpParams;
    set(param: string, value: string): HttpParams;
    delete(param: string, value?: string): HttpParams;
    toString(): string;
}

2 >

3. Contoh penggunaan

declare interface HttpParamsOptions {
    fromString?: string;
    fromObject?: {
        [param: string]: string | ReadonlyArray<string>;
    };
    encoder?: HttpParameterCodec;
}

4. Pengepala permintaan

import { HttpParams } from '@angular/common/http';

let params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("sex", "male")
let params = new HttpParams({ fromString: "name=zhangsan&age=20"})

Penciptaan medan pengepala permintaan memerlukan penggunaan kelas HttpHeaders jenis di bawah objek contoh kelas Kaedah untuk memanipulasi pengepala permintaan.

export declare class HttpHeaders {
    constructor(headers?: string | {
        [name: string]: string | string[];
    });
    has(name: string): boolean;
    get(name: string): string | null;
    keys(): string[];
    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;
}

5. Kandungan respons

let headers = new HttpHeaders({ test: "Hello" })

declare type HttpObserve = 'body' | 'response';
// response 读取完整响应体
// body 读取服务器端返回的数据

6 ialah satu cara untuk menangkap dan mengubah suai permintaan dan respons HTTP secara global dalam aplikasi Angular. (Token, Ralat)

this.http.get(
  "https://jsonplaceholder.typicode.com/users", 
  { observe: "body" }
).subscribe(console.log)

Pemintas hanya akan memintas permintaan yang dibuat menggunakan modul HttpClientModule.

ng g interceptor <name></name>

6.1 Minta pemintasan

6.2 Pemintasan tindak balas

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
	// 拦截方法
  intercept(
  	// unknown 指定请求体 (body) 的类型
    request: HttpRequest<unknown>,
    next: HttpHandler
     // unknown 指定响应内容 (body) 的类型
  ): Observable<HttpEvent<unknown>> {
    // 克隆并修改请求头
    const req = request.clone({
      setHeaders: {
        Authorization: "Bearer xxxxxxx"
      }
    })
    // 通过回调函数将修改后的请求头回传给应用
    return next.handle(req)
  }
}

6.3 Suntikan pemintas

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
	// 拦截方法
  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<any> {
    return next.handle(request).pipe(
      retry(2),
      catchError((error: HttpErrorResponse) => throwError(error))
    )
  }
}

7. Angular Proxy

1 Cipta fail proxy.conf.json dalam direktori akar projek dan tambah kod berikut

import { AuthInterceptor } from "./auth.interceptor"
import { HTTP_INTERCEPTORS } from "@angular/common/http"

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})

/api/*: Permintaan bermula dengan /api yang dikeluarkan dalam aplikasi melalui proksi ini

{
 	"/api/*": {
    "target": "http://localhost:3070",
    "secure": false,
    "changeOrigin": true
  }
}

sasaran: URL sebelah pelayan
secure: Jika protokol URL sisi pelayan ialah https, item ini perlu benar
changeOrigin: Jika bahagian pelayan bukan localhost, item ini perlu benar
2. Nyatakan fail konfigurasi proksi (kaedah satu)

• 3. Nyatakan fail konfigurasi proksi (kaedah kedua)

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
}

"serve": {
  "options": {
    "proxyConfig": "proxy.conf.json"
  },

Modul ini digunakan untuk menghantar permintaan dan kaedah yang digunakan untuk menghantar permintaan semua mengembalikan Video Pengaturcaraan

! ! Http

Atas ialah kandungan terperinci Analisis ringkas modul HttpClientModule dalam pembelajaran sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!