HTTP: 使应用能够对远端服务器发起相应的Http调用；
你要知道：
HttpModule并不是Angular的核心模块，它是Angualr用来进行Web访问的一种可选方式，并位于一个名叫@angual/http的独立附属模块中；也就是说：使用http之前要引入此模块;
1.基本使用：
???import { BrowserModule } from ‘@angular/platform-browser‘; ???import { NgModule } from ‘@angular/core‘; ???import {HttpModule} from ‘@angular/http‘; ?/*引入它*/ ???import { AppComponent } from ‘./app.component‘; ???@NgModule({ ?????declarations: [ ???????AppComponent ?????], ?????imports: [ ???????BrowserModule, ???????HttpModule ?/*导入*/ ?????], ?????providers: [], ?????bootstrap: [AppComponent] ???}) ???export class AppModule { }注意，现在HttpModule已经是根模块AppModule的imports数组的一部分了;
2.介绍模拟web api 发送请求
注意：是在你没有真实的远程服务请求地址时，自己模拟一个web服务，用于测试代码；倘若有真实的远程服务器，则不需要这个；
2.1 引入InMemoryWebApiModule，这是Angular提供的一个辅助服务，负责与远程服务器对话 — 替换成了内存 Web API服务，类似于后端服务；
import { InMemoryWebApiModule } from ‘angular-in-memory-web-api‘;注意：导入这个，如果出现错误，可能是你的node-module 文件库里面没有此库，这时候打开你的package.json文件：
"dependencies"
里面配置这样一句：
"angular-in-memory-web-api": "^0.3.2"
重新运行npm install ；
2.2 向内存服务中注入数据，如果没有数据是不能运行的；
import { InMemoryDataService } ?from ‘./in-memory-data.service‘;注意几点：
???in-memory-data.service.ts 文件是你自己创建的，用来存放实例数据的； ???in-memory-data.service.ts 这样写： ???import { InMemoryDbService } from ‘angular-in-memory-web-api‘; ???export class InMemoryDataService ?implements InMemoryDbService{ ??????createDb() { ???????const heroes = [ ?????????{ id: 0, ?name: ‘Zero‘ }, ?????????{ id: 1, name: ‘Mr. Nice‘ }, ?????????{ id: 2, name: ‘Narco‘ }, ?????????{ id: 3, name: ‘Bombasto‘ }, ???????]; ???????return {heroes}; ?????} ???}3.这里相当于自己创建了一个内部数据库；
2.3 导入的文件如何在app.module.ts中注入：
import { BrowserModule } from ‘@angular/platform-browser‘;import { NgModule } from ‘@angular/core‘;import {HttpModule} from ‘@angular/http‘;import { InMemoryWebApiModule } from ‘angular-in-memory-web-api‘;import { InMemoryDataService } ?from ‘./in-memory-data.service‘;import { AppComponent } from ‘./app.component‘;@NgModule({ ?declarations: [ ???AppComponent ?], ?imports: [ ???BrowserModule, ???HttpModule, ???InMemoryWebApiModule.forRoot(InMemoryDataService), ?/*这样注入*/ ?], ?providers: [], ?bootstrap: [AppComponent]})export class AppModule { }这里现在就是全部代码；
3.如何发起http请求；
3.1创建一个服务；
import {Injectable} from ‘@angular/core‘;@Injectable()export class HeroService{}angular 中所有创建服务的模式都是这样，我们创建了一个HeroService的文件，下载要在app.module.ts中注入它；
import {HeroService} from ‘./hero.service‘; ?providers: [HeroService], ?bootstrap: [AppComponent]注意：
1.providers 是专门用来注入服务的；2. 可以在app.module.ts里的providers中注入服务，也可以在你的子模块和组件中注入，前者是共享的服务，一次注入，整个项目都有效，如果在子模块中或者子组件中注入，这只是你属于当前模块或当前组件下有效，其他的组件需要使用，都得自己重新注入；一般情况下：返回的是一个能解析的promise(承诺)
3.2 引入http ;
import {Http} from ‘@angular/http‘;constructor(private http:Http){ }一定要在构造里创建它；
3.3 尝试获取内存数据库里面的信息；
import {Injectable} from ‘@angular/core‘;import {Http} from ‘@angular/http‘;import ‘rxjs/add/operator/toPromise‘;import {Hero} from ‘./hero‘;@Injectable()export class HeroService{ ???constructor(private http:Http){
/*注释1*/ ?private heroUrl=‘api/heroes‘;
/*注释2*/ ????getHeroes(): Promise<Hero[]>{ ???????????????return this.http.get(this.heroUrl) /*注释3*/ ????????????.toPromise() /*注释4*/ ????????????.then(response =>response.json().data as Hero[])/*注释5*/ ?????????????.catch((error: any) => Promise.reject(error || ‘Server error‘)); ?????????????????????????} ????????????????????}现在我写了一个getHeroes()的方法：
解析几点：
注释1：http请求肯定需要Url地址，这里需要导入数据库里面的名；api/heroes 其实就是你内存数据库 web api里面
return {heroes};根据你返回的值，调用相应的api地址；
注释2： 使用的是http承诺（promise），一定要有返回值，返回的是一个可以解析成英雄列表的Observable对象 ,也就是我们的Hero；也就是需要导入这个
import {Hero} from ‘./hero‘;hero.ts文件包含：
export class Hero{ ???id:number; ???name:string;}Observable（可观察对象）是一个管理异步数据流的强力方式，后续会学习；
注释3： .toPromise会将我们得到的Observable对象转化成promise对象；
但是Angular中的observable对象并没有一个topromise操作符，这里就需要借助其他工具，
import ‘rxjs/add/operator/toPromise‘;
更多详细的可以看rxjs库操作符；
注释4：在 then 回调中提取出数据，这也是angular中一大特点，默认 JSON 解析,这个由json方法返回的对象只有一个data属性。
?这个data属性保存了英雄数组，这个数组才是调用者真正想要的。 所以我们取得这个数组，并且把它作为承诺的值进行解析
注意：web api 返回的是带有data属性的对象，而你真是的api可以返回其他值的；
注释5：错误处理,有异常很正常，我们可以将他们传给错误处理器；现在我们只是将错误记录到控制台，真实案例中，可以将错误进行处理；
4. 如何将获得的数据显示在界面；
4.1 组件中调用Hero.service.ts；
import { Component } from ‘@angular/core‘;import {HeroService} from ‘./hero.service‘;import {Hero} ?from ‘./hero‘;@Component({ ?selector: ‘app-root‘, ?templateUrl: ‘./app.component.html‘, ?styleUrls: [‘./app.component.css‘]})export class AppComponent { /*注释1*/ hero:Hero[]; /*注释2*/ constructor(private service:HeroService){ ????????????this.getHeroes(); ???????????} ?????????getHeroes(){/*注释3*/ ????this.service.getHeroes().then( ??????????????hero=>{ ????????????????this.hero=hero; ?????????????????console.log(this.hero); ???????????????????}/*注释4*/ ????).catch((error: any) => Promise.reject(error || ‘client error‘)) ??????????}}注释1： 用来接收返回的对象；注释2： 对引入的hero.service.ts服务初始化；注释3： 返回的是promise对象，用then方法去解析得到的值；注释4： 预期会犯错，抛出异常；
现在可以看看控制台打印的hero对象：
如何显示在我们的html上呢？
<ul *ngFor="let a of hero"> ??<li>{{a.id}} : {{a.name}}</li> </ul>简单的写了这样一段：
这里注意：多对数组或对象形式用*ngFor遍历；
运行localhost:4200,这样就可以让数据正常显示啦；
这里介绍的是采用promise的形式调用http的方法，原理就是：hero.service中，http.get()返回的Observable后面串联了一个toPromise操作符。 该操作符把Observable转换成了Promise，并且我们把那个承诺返回给了调用者；
5. http promise还能做什么？
5.1 尝试通过id获取英雄；
hero.service.ts中添加这段代码：
getHero(id:number):Promise<Hero>{ ????????const url = `${this.heroUrl}/${id}`; ????????return this.http.get(url) ????????.toPromise() ????????.then(response => ????????????????response.json().data as Hero, ???????????) ????????.catch((error: any) => Promise.reject(error || ‘Server error‘)); ????}和获取所有英雄的方法类似，这个的步骤是先获取所有的英雄，并从中过滤出与id匹配的那一个；
匹配api/hero/:id 模式，有点像路由；
5.2 组件中如何调用；
detailhero:Hero;
getHero(id:number){ ???this.service.getHero(id).then( ??????hero=>{ ????????this.detailhero=hero; ????????console.log(this.detailhero); ???????} ??).catch((error: any) => Promise.reject(error || ‘client error‘)) ?}方法都类似，只是你需要传入想查询的id;
constructor中运行此方法，比如我想知道第二个英雄的详情：
this.getHero(2);
看看控制台输出：
看看html代码：
<p *ngIf="detailhero">{{detailhero.name}}</p>注意：单个对象用*ngIf ；
6. http promise还有什么请求方式？
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `get` http method. ????*/ ???get(url: string, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `post` http method ????*/ ???post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `put` http method. ????*/ ???put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `delete` http method. ????*/ ???delete(url: string, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `patch` http method. ????*/ ???patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `head` http method. ????*/ ???head(url: string, options?: RequestOptionsArgs): Observable<Response>; ???/** ????* Performs a request with `options` http method. ????*/ ???options(url: string, options?: RequestOptionsArgs): Observable<Response>;
6.1 我们来添加一个英雄；
hero.service.ts中加入这一段：
/*注释1*/ private headers = new Headers({‘Content-Type‘: ‘application/json‘}); ?????addHero(name:string):Promise<Hero>{ ?????????return this.http.post(this.heroUrl,JSON.stringify({name:name}),{headers:this.headers}) ?????????.toPromise() ?????????.then( ?????????????res=> ?????????????????res.json().data as Hero ?????????) ?????????.catch((error: any) => Promise.reject(error || ‘Server error‘)); ?????}注释1：
import {Http,Headers} from ‘@angular/http‘;需要引入Headers，然后new 一个实例；
但是这个参数是可选的；
组件中怎么接收：
addhero:Hero; ?addHero(name:string){ ???this.service.addHero(name).then( ???????hero=>{ ?????????this.addhero=hero; ?????????console.log(this.addhero); ?????????this.hero.push(this.addhero); ?/*将添加的数据Push进hero数组*/ ???????} ???).catch((error: any) => Promise.reject(error || ‘client error‘)) ?}一样的代码，就不过多解释；
我们的英雄在哪里添加呢？
肯定是要有一个input输入框的：
<div> ????add:<input #heroName/> ????<button (click)="addHero(heroName.value);heroName.value=‘‘">add</button> </div>
添加之后，可以看到控制台会有输出：
但是界面显示的还是这些：
Angular会自动检测数据的变换，当有数据变换时，会实时更新
还有一些其他方法，自己去尝试下；
hero.service.ts:
import { Injectable } from ‘@angular/core‘;import { Http, Headers,Response} from ‘@angular/http‘;import ‘rxjs/add/operator/toPromise‘;import { Hero } from ‘./hero‘;@Injectable()export class HeroService { ???constructor(private http: Http) { } ???private heroUrl = ‘api/heroes‘; ???getHeroes(): Promise<Hero[]> { ???????return this.http.get(this.heroUrl) ???????????.toPromise() ???????????.then( this.extractData ) ?/*注释1*/ ???????????.catch((error: any) => Promise.reject(error || ‘Server error‘));/*注释2*/ ???} ???getHero(id: number): Promise<Hero> { ???????const url = `${this.heroUrl}/${id}`; ???????return this.http.get(url) ???????????.toPromise() ???????????.then(this.extractData) ???????????.catch(this.handleError); ???} ???private headers = new Headers({ ‘Content-Type‘: ‘application/json‘ }); ???addHero(name: string): Promise<Hero> { ???????return this.http.post(this.heroUrl, JSON.stringify({ name: name }), { headers: this.headers }) ???????????.toPromise() ???????????.then(this.extractData) ???????????.catch(this.handleError); ???} ??/** ???* ???* @param res 接收数据的方法 ???*/ ???private extractData(res: Response) ?{ ?/*注释2*/ ???????let body = res.json(); ???????return body.data|| {}; /*注释3*/ ???} ???/** ????* ?????* @param error 处理错误的方法 ????*/ ???private handleError(error: Response | any) { ???????return Promise.reject(error || ‘Server error‘); ???}}注释1：将then()和catch()里面的部分提取出来，每次使用只需要调用方法即可；注释2：接收的Response记得将Response在Http对象中引入；注释3：这里接收的data其实是一个any型；
7. Observable对象
Http服务中的每个方法都返回一个 HTTP Response对象的Observable实例；
Observable 就是一个拥有以下特性的函数：
- 它接收一个
observer对象作为参数，该对象中包含next、error和complete方法 - 它返回一个函数，用于在销毁 Observable 时，执行清理操作
在 RxJS 中，返回的是 Subcription 对象，该对象中包含一个 unsubscribe 方法。
一个 Observable 对象设置观察者 (observer)，并将它与生产者关联起来。该生产者可能是 DOM 元素产生的 click 或 input 事件，也可能是更复杂的事件，如 HTTP。
当 Observable 对象产生新值的时候，我们可以通过调用 next() 方法来通知对应的观察者。若出现异常，则会调用观察者的 error() 方法。当我们订阅 Observable 对象后，只要有新的值，都会通知对应的观察者。但在以下两种情况下，新的值不会再通知对应的观察者：
- 已调用 observer 对象的
complete()方法 - 消费者对数据不再感兴趣，执行取消订阅操作
此外在执行最终的 subscribe() 订阅操作前，我们传递的值可以经过一系列的链式处理操作。执行对应操作的东西叫操作符，每个操作符执行完后会返回一个新的 Observable 对象，然后继续我们的处理流程。
那么我们可以直接返回Observable给组件吗？
我们可以看看，之前getHero()那一段如果直接改成返回Observable对象会如何；
getHeroes():Observable<Hero[]>{ ?/*注释1*/ ???????return this.http.get(this.heroUrl) ???????.map(this.extractData); ????}注释1：不用调用toPromise()方法，自然也不用then()去取数据，而是直接返回Observable对象之后
调用RXJS中的map操作符来从返回的数据中提取数据；
所以你要引入：
import { Observable } ?from ‘rxjs/Observable‘;import ‘rxjs/add/operator/map‘;操作符之后会讲到，注意和之前的promise方法对比；
组件中怎么接收数据Observable对象呢？
getHeroes(){ ???this.service.getHeroes().subscribe( ???/*注释1*/ ?????hero=>{ ???????this.hero=hero; ???????console.log(this.hero); ?????} ???) ?}这样显示的效果也是一样的；
注释1：调用 subscribe() 方法，来获取最终的值，采取订阅的方式，而不是用then();
8. Observabel和Promise 有什么不同
8.1 两个都可以用于web API http的调用，但Observable是可以中途取消的，而Promise一旦触发就不能被取消；
setTimeout(() => { ???????this.service.getHero().unsubscribe(); ?????}, 1000); 8.2 因为Promise只能发起一次请求，只要接收到数据，就会算完成，所以Promise只能发射一个值就算结束，Observable可以连续发送好几个值，在服务器对第一个请求作出回应之前，再开始另一个不同的请求；
this.heroes = this.searchTerms ???.debounceTime(300) ???????????.distinctUntilChanged() ?????.switchMap(term => term ????????? this.service.search(term) ?????: Observable.of<Hero[]>([])) ???.catch(error => { ?????console.log(error); ?????return Observable.of<Hero[]>([]); ???});this.heroes.subscribe(value => console.log(value));这个后面代码操作符这块有详解；
8.3 Observable提供了很多的工具函数，最最最常用的filter和map；详细看看这两个map和filter；
map() 操作符返回一个新的 Observable 对象 filter() 操作符执行过滤操作，然后又返回一个新的 Observable 对象
最后我们通过调用 subscribe() 方法，来获取最终的值
Filter:过滤器
getHeroes(){ ???this.service.getHeroes().filter(hero => hero.length >= 2) ???.subscribe( ???????hero=>{ ??????????this.hero=hero; ???????} ???) ?}Map的用法上面有介绍；
但是，使用承诺的方式能让调用方法更容易写，并且承诺已经在 JavaScript 程序员中被广泛接受了。
再来看看Observable操作符：
根据名字搜索用户：
search(term: string): Observable<Hero[]> { ???????return this.http ??????????????.get(`api/heroes/?name=${term}`) ??????????????.map(response => response.json().data as Hero[]); ???}看看组件代码：
import { Observable } from ‘rxjs/Observable‘; ?/*注释1*/import { Subject } ?from ‘rxjs/Subject‘; ?/*注释2*/// Observable class extensionsimport ‘rxjs/add/observable/of‘; ?/*注释3*/// Observable operatorsimport ‘rxjs/add/operator/catch‘; ?/*注释4*/import ‘rxjs/add/operator/debounceTime‘; ?/*注释5*/import ‘rxjs/add/operator/distinctUntilChanged‘; ?/*注释6*/import ‘rxjs/add/operator/switchMap‘; /*注释6*/引入这些操作符：
注释1：引入RXJS的可观察对象；注释2：Suject是一个可观察事件流中的生产者，通过调用Next()对象，可以将新观察的对象放入可观察流中；注释3：是Rxjs为Observable对象提供的扩展，注释4：异常操作符，拦截失败的可观察对象。注释5：相当于settimeout(),延迟；注释6：distinctUntilChanged确保只在过滤条件变化时才发送请求， 这样就不会重复请求同一个搜索词了；注释7：switchMap()会为每个从debounce和distinctUntilChanged中通过的搜索词调用搜索服务。 它会取消并丢弃以前的搜索可观察对象，只保留最近的；使用这个每触发一次事件都会引起一次Http()的调用，即使你使用延迟，但同一时间还是会有多个Http请求，并且返回的顺序不一定是请求发起的顺序；
看看Http()方法调用：
heroes: Observable<Hero[]>; ?private searchTerms=new Subject<string>(); ??// searchTerms生成一个产生字符串的Observable ?/*每当调用search()时都会调用next()来把新的字符串放进该主题的可观察流中*/ ?search(term:string):void{ ???this.searchTerms.next(term); ?} ??ngOnInit(): void { ????this.heroes = this.searchTerms ???.debounceTime(300) ???????????.distinctUntilChanged() ?????.switchMap(term => term ????????? this.service.search(term) ?????: Observable.of<Hero[]>([])) ???.catch(error => { ?????console.log(error); ?????return Observable.of<Hero[]>([]); ???});}看看代码：
<div> ?search :<input #searchBox (keyup)="search(searchBox.value)"/> ????<div ?*ngFor="let b of heroes | async"> ???????{{b.name}} ???</div></div>为什么使用一个async管道呢？因为得到的是Observable对象，不是数组，*ngFor不能遍历可观察对象；
效果：
看完这个，大概知道：
Observable（可观察对象）是基于推送（Push）运行时执行（lazy）的多值集合；
关于操作符，我有话要说：
大部分RxJS操作符都不包括在Angular的Observable基本实现中，基本实现只包括Angular本身所需的功能，也就是，你需要的大多操作符都需要从rxjs中引入；
9. 上述的例子，其实说的都是关于web api,内存服务器的，占用内存的东西，速率都有点慢，如果你要从本地获取文件记住不要用这个；
可以换用json文件获取：
heroes.json：{ ?"data": [ ???{ "id": 1, "name": "Windstorm" }, ???{ "id": 2, "name": "Bombasto" }, ???{ "id": 3, "name": "Magneta" }, ???{ "id": 4, "name": "Tornado" } ?] 创建一个heroes.json，记得放在assets文件下： { ?"data": [ ???{ "id": 1, "name": "Windstorm" }, ???{ "id": 2, "name": "Bombasto" }, ???{ "id": 3, "name": "Magneta" }, ???{ "id": 4, "name": "Tornado" } ?]}我们app.module.ts里面的：
??InMemoryWebApiModule.forRoot(InMemoryDataService),
不用引入，引入之后会默认使用web api；
然后hero.service.ts中这样
private heroesUrl = ‘assets/heroes.json‘;
其他的都是一样的；
这种方式对于请求静态的本地数据是比较有用的；如果是请求真是的远程服务器地址，url换成远程地址就可以；
Angular 4+ Http
原文地址：http://www.cnblogs.com/sulishibaobei/p/7455388.html