A brief analysis of the HttpClientModule module in angular learning-JS Tutorial-php.cn

A brief analysis of the HttpClientModule module in angular learning

青灯夜游

Release： 2022-05-24 12:09:17

forward

1729 people have browsed it

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!

A brief analysis of the HttpClientModule module in angular learning

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 &#39;@angular/common/http&#39;;
imports: [
  httpClientModule
]

Copy after login

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

// app.component.ts
import { HttpClient } from &#39;@angular/common/http&#39;;

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

Copy after login

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

Copy after login

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]);

Copy after login

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

Copy after login

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

Copy after login

2.HttpParamsOptions interface

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

Copy after login

3.Usage example

import { HttpParams } from &#39;@angular/common/http&#39;;

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

Copy after login

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

Copy after login

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

Copy after login

5. Response content

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

Copy after login

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

Copy after login

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>

A brief analysis of the HttpClientModule module in angular learning

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

/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",
}

Copy after login

3. Specify the proxy configuration file (method two)

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

Copy after login

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!