HttpClientModule

This module is used to send Http requests, and the methods used to send requests all return An Observable.

1. Start fast

1. Introduce the HttpClientModule module

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

2. Inject an HttpClient service instance object for sending requests

   // app.component.ts
   import { HttpClient } from '@angular/common/http';
   
   export class AppComponent {
     constructor(private http: HttpClient){}}Copy the code

3. Send the request

   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 the code

---

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 the code

this.http.get<Post[]>('/getAllPosts')
  .subscribe(response= > console.log(response))
Copy the code

---

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 the code

2. HttpParamsOptions interface

   declare interfaceHttpParamsOptions { fromString? :string; fromObject? : { [param:string] :string | ReadonlyArray<string>; }; encoder? : HttpParameterCodec; }Copy the code

3. Use the sample

   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"})
   Copy the code

---

4. The request header

Request header fields are created using the HttpHeaders class, which has various methods for manipulating the headers underneath 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 the code

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

---

5. Response content

declare type HttpObserve = 'body' | 'response';
// response Reads the complete response body
// body reads the data returned by the server
Copy the code

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

---

6. The interceptor

Interceptors are the global way to capture and modify HTTP requests and responses in Angular applications. (Token, Error)

Interceptors will only intercept requests made using the HttpClientModule module.

$ ng g interceptor <name>
Copy the code

6.1 Request Interception

@Injectable(a)export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
  // Intercepting methods
  intercept(
    // unknown Specifies the type of the request body
    request: HttpRequest<unknown>,
    next: HttpHandler
     // unknown Specifies the type of the response content
  ): Observable<HttpEvent<unknown>> {
    // Clone and modify the request header
    const req = request.clone({
      setHeaders: {
        Authorization: "Bearer xxxxxxx"}})// The modified request is referred back to the application via a callback function
    return next.handle(req)
  }
}
Copy the code

6.2 Response Interception

@Injectable(a)export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
  // Intercepting methods
  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<any> {
    return next.handle(request).pipe(
      retry(2),
      catchError((error: HttpErrorResponse) = > throwError(error))
    )
  }
}
Copy the code

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 the code

---

7. Angular Proxy

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

   {
        "/api/*": {
           "target": "http://localhost:3070"."secure": false."changeOrigin": true}}Copy the code

   1. /api/: Issued in the application/apiThe initial request goes to this proxy
   2. target: Server sideURL
   3. secure: If the serverURLThe agreement ishttps, this need istrue
   4. changeOrigin: If the server is notlocalhost, this need istrue

2. Specifying the proxy configuration file (Method 1)

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

3. Specify proxy configuration file (Method 2)

   // angular.json file
   "serve": {
     "options": {
       "proxyConfig": "proxy.conf.json"
     },
   Copy the code