A brief analysis of what is the use of the HttpClientModule module in Angular? how to use?-JS Tutorial-php.cn

A brief analysis of what is the use of the HttpClientModule module in Angular? how to use?

青灯夜游

Release： 2021-09-28 10:53:27

forward

2309 people have browsed it

This article will take you to understand the HttpClientModule module in Angular, and introduce how to use the HttpClientModule module. I hope it will be helpful to everyone!

A brief analysis of what is the use of the HttpClientModule module in Angular? how to use?

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

IntroductionHttpClientModule Module

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

Copy after login

InjectionHttpClient 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

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

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

HttpParamsOptions Interface

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

Copy after login

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 header

Request header The creation of 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

Interceptors are a way for global

Angular applications to capture and modify HTTP requests and responses. (Token, Error)

The interceptor will only intercept requests made using the

HttpClientModule module.

$ ng g interceptor <name>

Copy after login

A brief analysis of what is the use of the HttpClientModule module in Angular? how to use?

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

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 sideURL
secure: If the protocol of the server-side URL is https, this item is required Is true
changeOrigin: If the server is not localhost, this item needs to be true

Specify

proxy configuration file (method one)

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

Copy after login

Specify

proxy configuration file (method two) )

// angular.json 文件中
"serve": {
  "options": {
    "proxyConfig": "proxy.conf.json"
  },

Copy after login

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of A brief analysis of what is the use of the HttpClientModule module in Angular? how to use?. For more information, please follow other related articles on the PHP Chinese website!