Use of Angular22 httpclient

1 HttpClient Introduction

HttpClient http Evolution, note: http in the @angular/http , and httpclient in the @angular/common/http ; need to import at the module level before use Httpclientmodule, the usual practice is to import the core module into the main module

2 httpclient Feature Description 2.1 default JSON parsing

The default data format used by HttpClient is JSON, so you do not need to convert the data format using map, that is: Http.get (URL). map (res = Res.json ()). Subscribe (...) will be Http.get (URL). Subscribe (...) instead

2.2 Interceptors

Pending update ...

2018-3-12 15:00:20

Reference Blog: Click to

3 HttpClient Programming Step 3.1 Import Httpclientmodule

Import Httpclientmodule at the module level

Tip 01: Import directly into the main module, but the general practice is to put some imported modules into a core module, and then import the core module into the main module can be

Import {ngmodule, skipself, Optional} from ' @angular/core '; import {commonmodule} from' @angular/common '; import {browseranimationsmodule} from' @angular/platform-browser/animations '; import {headercomponent} from'./header/header.component '; import {maincomponent} from'./main/main.component '; import {footercomponent} from'./footer/footer.component '; Import' Hammerjs '; Import' Rxjs/rx '; Import' Rxjs/add/operator/map '; import {sidenavcomponent} from'./sidenav/sidenav.component '; import {sharedmodule} from‘.. /shared/shared.module '; import {routermodule} from' @angular/router '; import {HttpModule} from' @angular/http '; import {httpclientmodule} from' @angular/common/http '; @NgModule ({imports: [Browseranimationsmodule, Sharedmodule, Routermodule, HttpModule, Httpclientmod    Ule], declarations: [Headercomponent, Maincomponent, Footercomponent, sidenavcomponent], exports: [ Headercomponent, Maincomponent, Footercomponent, Sidenavcomponent]}) export class Coremodule {constructor (@O Ptional () @SkipSelf () parent:coremodule) {if(parent) {Throw NewError (' core module already loaded, do not load repeatedly '); }  }}

Core Modules

Pit 01: Modules related to forms cannot be imported in the core module, can only be imported in shared modules, and then imported into modules that need to be used in the form

3.2 Creating an HTTP Service

Create a service file specifically to hold some methods of executing HTTP requests that rely on injected HttpClient in the service to execute HTTP requests using HttpClient objects

Pit 01:httpclient The return value of the GET, post, delete, and put methods provided by the object is a JavaScript object that has been converted to JSON data and must use the object name if you want to get a property in the object [ ' Property name ' , you cannot use the object name. The format of the property name, if the object name is used. The format of the property name must be typed by the generic to type the response data when calling the method provided by the HttpClient object. For example:

　　　　　　

　　　　

Import {injectable} from ' @angular/core '@angular/common/http '. /model/clientbaseinfo '; @Injectable () Export class Testservice {    constructor (        private Http:httpclient    ) {}    Testget () {        returnthis .http.get<responseresult<clientbaseinfo>> (' Http://127.0.0.1:8888/dev/client/findAll ');}    }

HTTP Service3.3 Dependency Injection HTTP Service

At the module level, it relies on injecting its own defined HTTP service

　　　　

Import {Ngmodule} from ' @angular/core '; import {commonmodule} from' @angular/common '; import {test01component} from'./test01/test01.component '; import {coremodule} from‘.. /core/core.module '; import {testhomecomponent} from'./test-home/test-home.component '; import {sharedmodule} from‘.. /shared/shared.module '; import {testroutingmodule} from'./test-routing.module '; import {test02component} from'./test02/test02.component '; import {test03component} from'./test03/test03.component '; import {testdemocomponent} from'./test-demo/test-demo.component '; import {HttpModule} from' @angular/http '; import {Testservice} from'./test.service '; @NgModule ({imports: [Sharedmodule, Testroutingmodule], declarations: [Testhomecomponent, test01com    Ponent, Test02component, Test03component, testdemocomponent], exports: [Test01component], providers: [ Testservice]}) Export class Testmodule {}

module-level Dependency injection HTTP service3.4 Executing an HTTP request

Invoking the method provided by the HTTP service in the component to send an HTTP request

　　　　

Pit 01: When the result of the response data is a list of multiple instances of the same type of object, if you want to assign this list to a list of specified types, the type error is reported, for example: The response data is [A, B, C, d] where a B c d is a person Class is now assigned a value of [A, B, C, d] to result where result is of type person[] , then package type ERROR-- cannot assign type ' person ' Give the type "person[", but if you change the result type to person it compiles successfully, and you can use result as a list in the view, for unknown reasons.

Use of Angular22 httpclient