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下載地址