1. 使用Http
绝大部分应用程序都会和后台服务打交道，Http是浏览器和服务器之间通讯的主要协议，通过Http调用来访问远程服务器上相应的 Web API。
HttpModule 并不是 Angular 的核心模块，通过Angular包中一个名叫 @angular/http 的独立附属模块发布了出来。我们的应用将会依赖于Angular的 http 服务，它本身又依赖于其它支持类服务。来自 @angular/http 库中的 HttpModule 保存着这些 HTTP 相关服务提供商的全集。
现代浏览器支持两种基Http的API ： XMLHttpRequest (XHR) 和 JSONP 。少数浏览器还支持 Fetch 。在Angular中分别对应@angular/http 库中的HttpModule 和JsonpModule两个模块。
2. GET获取数据
为了能够使用XHR中的Get方法来获取数据信息，我们把 HttpModule 添加到 AppModule 的 imports 列表中，这样本应用程序的任何地方都可以访问XHR服务。
我们使用Http服务的实例中的get方法来执行http get方法获取数据，该方法的调用形式如下
get(url: string, options?: RequestOptionsArgs) : Observable<Response>
来看一个简单的例子，代码如下
|
@Component({ selector: 'demo', template: '<button id="input" (click)="click()">Get Data</button>', }) export class DemoComponent { constructor(private http: Http) { } url: string = '/api/list'; click() { this.http.get(this.url).subscribe(function (data) { console.log(data) }) } } |
我们在DemoComponent构造函数中采用DI获取了Http服务的实例http，当点击获取数据的按钮后，便能够通过Http实例中的get方法，根据其参数url地址及options?: RequestOptionsArgs参数来获取对应的数据信息。该方法返回的是一个可观察对象 (Observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
3. POST发送数据
同样的，为了能够使用XHR中的POST方法来获取数据信息，我们把 HttpModule 添加到 AppModule 的 imports 列表中，这样本应用程序的任何地方都可以访问XHR服务。
我们使用Http服务的实例中的post方法来执行http post方法获取数据，该方法的调用形式如下
post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>
来看一个简单的例子，代码如下
|
@Component({ selector: 'demo', template: '<button id="input" (click)="click()">Get Data</button>', }) export class DemoComponent { constructor(private http: Http) { } url: string = '/api/post'; click() { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); this.http.post(this.url, JSON.stringify({ 'id': '1' }), options).subscribe(function (data) { console.log(data) }) } } |
我们在DemoComponent构造函数中采用DI获取了Http服务的实例http，当点击获取数据的按钮后，便能够通过Http实例中的get方法，根据其参数url地址, body:any及options?: RequestOptionsArgs参数来提交对应的数据信息，其中body表示传递到服务器端的数据信息。示例中，我们传递json格式的数据到服务器端，所以使用了'Content-Type': 'application/json'头信息进行包装。
该方法返回的是一个可观察对象 (Observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
4. JSONP获取数据
用 Angular Http 服务发起 XMLHttpRequests，是与服务器通讯时最常用的方法。但它不适合所有场景。
出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的XHR。所谓源就是 URI 的协议 (scheme) 、主机名 (host) 和端口号 (port) 这几部分的组合。这被称为同源策略。
为了可以向不同源的服务器发起 XHR 请求，这时候就需要支持一种老的、只读的 ( 译注：即仅支持 GET) 备选协议，这就是 JSONP。
为了能够使用JSONP中的Get方法来获取数据信息，我们把 JsonpModule 添加到 AppModule 的 imports 列表中，这样本应用程序的任何地方都可以访问Jsonp服务。
Angular的Jsonp服务不但通过JSONP 扩展了Http 服务，而且限制我们只能用GET请求，调用的形式如下。
get(url: string, options?: RequestOptionsArgs) : Observable<Response>
我们来看一个例子，该示例和Http Get访问十分类似，
|
@Component({ selector: 'demo', template: '<button id="input" (click)="click()">Get Data</button>', }) export class DemoComponent { constructor(private jsonp: Jsonp) { } url: string = '/api/list'; click() { this.jsonp.get(this.url).subscribe((data) => { console.log(data); }); } } |
5. 结果处理
5.1 可观察对象
我们通过Http以及Jsonp的api接口可以知道，默认返回值都是可观察对象 Observable< Response >。可以把可观察对象 Observable 看做一个由某些“源”发布的事件流。 通过 订阅 到可观察对象 Observable ，我们监听（subscribe）这个流中的事件。 在这些订阅中，我们指定了当 Web 请求生成了一个成功事件 ( 有效载荷是英雄数据 ) 或失败事件 ( 有效载荷是错误对象 ) 时该如何采取行动，如示例中所示。
我们的服务可以返回 HTTP 响应对象Response。但这可不是一个好主意！ 数据服务的重点在于，对消费者隐藏与服务器交互的细节。其实上，我们最关心的还是获取到的返回数据信息，这时候我们就可以利用RxJS库来对事件流进行一些额外的处理。
RxJS("Reactive Extensions" 的缩写)是一个被 Angular 认可的第三方库，它实现了异步可观察对象 (asynchronous observable) 模式。Rxjs库中包含很多对事件流进行处理的方法，例如map，distinctUntilChanged等操作符。
针对返回数据是json格式的响应对象，可以把Response解析成 JavaScript 对象——只要调一下 response.json() 就可以了，这时候我们就可以利用map操作符来进行处理，例如
|
this.jsonp.get(this.url) .map((rsp:Response)=>{ return rsp.json() }) .subscribe((data) => { console.log(data); }); |
5.2 Promise
虽然 Angular 的 http 客户端 API 返回的是 Observable<Response> 类型的对象，但我们也可以把它转成 Promise<Response>。这很容易，只需要调用可观察对象 Observable< Response >的方法toPromise()就能够进行转化。例如
|
this.jsonp.get(this.url) .toPromise() .then((rsp: Response) => { console.log(rsp) }); |
完整代码：
app.module.ts
导入 Angular 的 HttpModule。
import { HttpModule } from '@angular/http';
//然后在 imports 中插入 HttpModule 即可
import {HttpClientModule} from '@angular/common/http';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule, HttpClientModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.ts
import { Component } from '@angular/core';import {HttpClient} from "@angular/common/http";
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
// 接收数据用
listData: Object;
constructor( private http: HttpClient) {
}
ionViewDidLoad() {
// 网络请求
//http.request 会返回一个 Observable 对象。我们可以使用 subscribe 订阅变化。
this.http.get('http://jsonplaceholder.typicode.com/photos')
.subscribe((res: Response) => {
this.listData = res;
// console.log(res);
});
}
}
http.request 会返回一个 Observable 对象。我们可以使用 subscribe 订阅变化。
当 http.request 从服务器返回一个流时，它就会发出一个 Response 对象。我们用 json 方法提取出响应体解析成一个 Object，最后将它赋值给 this.listData。
home.html
<ion-header><ion-navbar>
<ion-title>
Action Sheets
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding >
<ion-list *ngFor="let item of listData">
<ion-item>
<ion-avatar item-left>
<img [src]="item?.url">
</ion-avatar>
{{item?.title}}
</ion-item>
</ion-list>
</ion-content>
这里使用了一个 ngFor 遍历了 listData，生成了一个列表数据。还有一点要提一下，这个 item?.title 是 Angular 的一种语法，如果对象为空就不会取值，可以防止报错。
最后效果如图所示
