ionic3 教程（五）基本的网络请求

连接：
ionic3 教程（一）安装和配置
ionic3 教程（二）登陆页制做
ionic3 教程（三）设置页制做
ionic3 教程（四）安卓硬件返回键处理
ionic3 教程（五）基本的网络请求

这是最后一节，本节主要用最简单网络请求和基本的内置指令作一个演示。

• 对 Angular 的基本架构不熟悉的请点Angular 4.0 架构详解
• 对 Angular 的内置指令不熟悉的请点Angular 4.0 内置指令全攻略

前言

一般咱们但愿在 HTTP 请求的时候，页面不会失去响应，因此咱们的 HTTP 请求是异步的。
JavaScript 中，一般用 3 种方式处理异步代码。

1. 回调（callback）
2. 承诺（promise）
3. 可观察对象（observable）

promise 和 observable 主要三个主要不一样：

• observable 能够中途取消，promise 发出就不行
• observable 能够持续发射不少值，而 promise 只能发射一个值就结束了
• observable 提供了更多的工具函数，最经常使用的是 filter 等

想更多了解 promise 的请看 《JavaScript Promise迷你书》

想更多了解 rxjs(observable) 的请看 《rxjs中文教程》

在 Angular 中，处理异步代码的最佳方式就是使用可观察对象，因此接下来会用到

app.module.ts

导入 Angular 的 HttpModule。

import { HttpModule } from '@angular/http';

//而后在 imports 中插入 HttpModule 便可
复制代码

测试用接口

原本找了一些别的接口做为测试，发现不会显示数据，打开 Chrome 测试了一下发现有跨域问题。

XMLHttpRequest cannot load
复制代码

因此这里给你们推荐个网站，咱们就用他来进行测试。 http://jsonplaceholder.typicode.com/

拖到下面的 Resources 能够看到图片。从图中能够看出接口种类仍是比较丰富的，咱们选择带图片的 /photos 进行测试。

home.ts

import { Http, Response } from '@angular/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 接收数据用
  listData: Object;

  // 依赖注入
  constructor(public navCtrl: NavController, private http: Http) {

  }

  ionViewDidLoad() {
    // 网络请求
    this.http.request('http://jsonplaceholder.typicode.com/photos')
    .subscribe((res: Response) => {
      this.listData = res.json();
    });
  }
复制代码

http.request 会返回一个 Observable 对象。咱们可使用 subscribe 订阅变化。

当 http.request 从服务器返回一个流时，它就会发出一个 Response 对象。咱们用 json 方法提取出响应体解析成一个 Object，最后将它赋值给 this.listData。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>首页</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 的一种语法，若是对象为空就不会取值，能够防止报错。

最后效果如图所示

再补上一个 Promise 的写法

import 'rxjs/add/operator/toPromise';

this.http.request('http://jsonplaceholder.typicode.com/photos')
  .toPromise()
  .then(res => { this.listData = res.json(); })
  .catch(err => { console.error(err) });
复制代码

本身动手试一试吧。这个入门系列结束以后，应该会去找一些模块进行深刻点的展开。

Demo下载地址