Angular22 HttpClient的使用

 

1 HttpClient介绍

　　HttpClient时Http的演进，注意：Http在@angular/http中，而HttpClient在@angular/common/http中； 使用前需要在模块级别导入HttpClientModule,通常的做法是在核心模块中导入，在将核心模块导入到主模块中

 

2 HttpClient特性说明

　　2.1 默认JSON解析

　　　　HttpClient使用的默认数据格式就是JSON，所以不需要在利用map进行数据格式转化了，即：http.get(url).map(res => res.json()).subscribe(...)将被http.get(url).subscribe(...)代替；

　　2.2 拦截器

　　　　待更新......

　　　　2018-3-12 15:00:20

　　　　参考博文：点击前往

 

3 HttpClient编程步骤

　　3.1 导入HttpClientModule

　　　　在模块级别导入HttpClientModule

　　　　技巧01：直接在主模块中导入即可，但是一般的做法是将一些只导入一次的模块放到一个核心模块中，再将核心模块导入到主模块中即可

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,
    HttpClientModule
  ],
  declarations: [
    HeaderComponent,
    MainComponent,
    FooterComponent,
    SidenavComponent
  ],
  exports: [
    HeaderComponent,
    MainComponent,
    FooterComponent,
    SidenavComponent
  ]
})
export class CoreModule { 
  constructor( @Optional() @SkipSelf() parent: CoreModule) {
    if (parent) {
      throw new Error('核心模块已经加载了，请勿重复加载');
    }
  }
}

核心模块