关于http服务

HttpModule并不是angular的核心模块，它是一个附加的模块，存在于@angular/http中，虽然如此但是依然可以在需要的时候使用它，只需要在使用之前引入即可。对于大多数app来说使用http服务是很常见的，所以我们将HttpModule加入到AppModule的import列表和应用的根组件中，这样就可以在整个应用中使用http服务了

在自定义服务中使用Http服务

http服务通过其get方法获取数据，他会返回RxJS Observable，我们希望使用的数据是Promise，然而 Observable 并没有toPromise（）方法，可以在自定义服务中这样引入

import 'rxjs/add/operator/toPromise';

如此就拓展了Observable的功能了

具体代码如下

import { Injectable } from '@angular/core';import { Headers, Http } from '@angular/http';import 'rxjs/add/operator/toPromise';import { Hero } from './hero'; private heroesUrl = 'api/heroes'; // URL to web api constructor(private http: Http) { } getHeroes(): Promise<Hero[]> { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json().data as Hero[]) .catch(this.handleError); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); }

在回调函数then()中调用了返回对象的json()方法将data从返回对象中分离出来

.then(response => response.json().data as Hero[])

这里的.data是因为返回对象中有data这个属性，具体情况下会不一样

注意：Http failure是经常发生的，必须预料到会有异常的可能，所以在方法最后捕获了异常并将其传递给异常处理器，使用Promise.reject()将错误信息返回给服务调用者

利用服务实现数据的增删改查

信息查询

可以在请求url里面带上参数，这样就可以将参数传到后台，服务器查到信息后返回到前台

getHero(id: number): Promise<Hero> { const url = `${this.heroesUrl}/${id}`; return this.http.get(url).toPromise() .then(response => response.json().data as Hero) .catch(this.handleError); }

修改信息

在自定义服务中

private headers = new Headers({'Content-Type': 'application/json'}); update(hero: Hero): Promise<Hero> { const url = `${this.heroesUrl}/${hero.id}`; return this.http .put(url, JSON.stringify(hero), {headers: this.headers}) .toPromise() .then(() => hero) .catch(this.handleError);}

依然是在url后带上id告知服务器要修改的记录标识，JSON.stringify()将对象转化成json字符串，通过put将字符串放到请求中，header说明了请求体的类型

在调用服务的组件中

save(): void { this.heroService.update(this.hero) .then(() => this.goBack()); }

修改成功后返回前一个视图

添加信息

在自定义服务中

create(name: string): Promise<Hero> { return this.http .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}) .toPromise() .then(res => res.json().data) .catch(this.handleError);}

删除信息

在自定义服务中

delete(id: number): Promise<void> { const url = `${this.heroesUrl}/${id}`; return this.http.delete(url, {headers: this.headers}) .toPromise() .then(() => null) .catch(this.handleError); }

这步只是将后台的信息删除了，但是本地数组中依然存在，所以依然会在视图中显示，所以就要在组建中进行一些处理

delete(hero: Hero): void { this.heroService .delete(hero.id) .then(() => { this.heroes = this.heroes.filter(h => h !== hero); if (this.selectedHero === hero) { this.selectedHero = null; } });}

这步就是将已经删除的数据从本地数组中过滤掉

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。