import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
@NgModule({imports: [BrowserModule,// Include it under 'imports' in your application module// after BrowserModule.HttpClientModule,],
})
export class MyAppModule {}

class HttpClient {request(first: string|HttpRequest<any>, url?: string, options: {...}): Observable<any>delete(url: string, options: {...}): Observable<any>get(url: string, options: {...}): Observable<any>head(url: string, options: {...}): Observable<any>jsonp<T>(url: string, callbackParam: string): Observable<T>options(url: string, options: {...}): Observable<any>patch(url: string, body: any|null, options: {...}): Observable<any>post(url: string, body: any|null, options: {...}): Observable<any>put(url: string, body: any|null, options: {...}): Observable<any>
}   

{"data": [{ "id": 1, "name": "Windstorm" },{ "id": 2, "name": "Bombasto" },{ "id": 3, "name": "Magneta" },{ "id": 4, "name": "Tornado" }]
}

import { Component,OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';  /*注释1*/
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent  implements OnInit {
constructor(private http:HttpClient){} datas:string[];ngOnInit(){this.http.get('./assets/heroes.json').subscribe(data=>{  /*注释2*/this.datas=data['data'];console.log(this.datas)}) }
}

<div><ul  *ngFor="let data of datas"><li>{{data.id}}  {{data.name}}</li></ul>
</div>

  get(url: string, options: {headers?: HttpHeaders,observe?: HttpObserve,params?: HttpParams,reportProgress?: boolean,responseType?: 'arraybuffer'|'blob'|'json'|'text',withCredentials?: boolean,}): Observable<any> 

 datas:string[];   //定义一个接口来描述这个类型的正确形态this.datas=data['data']; /*注释1*/

 this.datas=data.data;

 does not exist on type 'Object

 this.http.get('/assets/1.txt',{responseType:'text'}).subscribe(data=>console.log(data)
)

  const params = new HttpParams().set('id', '1').set('name','Windstorm')this.cus=this.http.get('assets/heroes.json',{params}).do(console.log).map(data=>console.log( _.values(data))    );

import {HttpClient, HttpParams} from '@angular/common/http';

http://localhost:4200/assets/heroes.json?id=1&name=Windstorm

const headers = new HttpHeaders().set("X-CustomHeader", "custom header value");

避免发送重复请求import 'rxjs/add/operator/shareReplay';const httpGet = this.http.get("assets/heroes.json").map(data => _.values(data)).shareReplay();这样即使你将 httpGet再赋值给另一个变量，或重复调用也不会再次请求了

并行发送 HTTP 请求的一种方法是使用 RxJs 中的 forkjoin 操作符：import 'rxjs/add/observable/forkJoin';
Requests() {const result = Observable.forkJoin(this.http.get('/assets/heroes.json'),this.http.get('/assets/heroes.json'));result.subscribe(values => {console.log("all values", values)});
}

顺序发送请求
sequentialRequests() {const sequence$ = this.http.get<Hero>('/assets/heroes.json').switchMap(hero => {hero.id+= ' - TEST ';return this.http.put('/assets/heroes.json', hero)});sequence$.subscribe();
}

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http';
import {Observable} from 'Rxjs/Observable';@Injectable()
export class NoopInterceptor implements HttpInterceptor {intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {return next.handle(req).map(event => {if (event instanceof HttpResponse) {if (event.status === 401) {// JWT expired, go to login}}return event;}}
}

import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';@NgModule({providers: [{provide: HTTP_INTERCEPTORS,useClass: NoopInterceptor,multi: true,}],
})
export class AppModule {}