A brief analysis of the HttpClientModule module in angular learning

This article will take you to understand the HttpClientModule module in angular, and introduce the request method, request parameters, response content, interceptors, Angular Proxy and other related knowledge. I hope it will be helpful to everyone!

This module is used to send Http requests, and the methods used to send requests all return Observable objects. [Related tutorial recommendations: "angular tutorial"]

1. Quick start

1), introduce the HttpClientModule module

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

2), inject HttpClient service instance object, used to send requests

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

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

3), send requests

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, request method

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. Request parameters

1.HttpParams class

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.HttpParamsOptions interface

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

3.Usage example

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"})

4. Request headers

The creation of request header fields requires the use of the HttpHeaders class. There are various methods for operating request headers under the class instance object.

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;
}

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

5. Response content

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

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

6. Interceptor

Interceptor is a global capture and modification in Angular applications HTTP request and response methods. (Token, Error)

The interceptor will only intercept requests made using the HttpClientModule module.

ng g interceptor <name></name>

#6.1 Request interception

@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.2 Response interception

@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))
    )
  }
}

6.3 Interceptor injection

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

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

7. Angular Proxy

1. Create the proxy.conf.json file in the root directory of the project and add the following code

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

• /api/*: Requests starting with /api issued in the application go through this proxy

• target: Server-side URL

• secure: If the protocol of the server-side URL is https, this item needs to be true

• changeOrigin: If the server-side is not localhost, this item needs to be true

2. Specify the proxy configuration file (method one)

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

3. Specify the proxy configuration file (method two)

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

This module is used to send

Http requests, and the methods used to send requests all return Observable objects.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief analysis of the HttpClientModule module in angular learning. For more information, please follow other related articles on the PHP Chinese website!