資訊專欄INFORMATION COLUMN
摘要：鏈接教程一安裝和配置教程二登錄頁制作教程三設(shè)置頁制作教程四安卓硬件返回鍵處理教程五基本的網(wǎng)絡(luò)請求這是最后一節(jié)，本節(jié)主要用最簡單網(wǎng)絡(luò)請求和基本的內(nèi)置指令做一個(gè)演示。接收數(shù)據(jù)用依賴注入網(wǎng)絡(luò)請求會(huì)返回一個(gè)對象。
鏈接：
ionic3教程（一）安裝和配置
ionic3教程（二）登錄頁制作
ionic3教程（三）設(shè)置頁制作
ionic3教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網(wǎng)絡(luò)請求
這是最后一節(jié)，本節(jié)主要用最簡單網(wǎng)絡(luò)請求和基本的內(nèi)置指令做一個(gè)演示。
對 Angular 的基本架構(gòu)不熟悉的請點(diǎn)Angular 4.0 架構(gòu)詳解
對 Angular 的內(nèi)置指令不熟悉的請點(diǎn)Angular 4.0 內(nèi)置指令全攻略
前言通常我們希望在 HTTP 請求的時(shí)候，頁面不會(huì)失去響應(yīng)，所以我們的 HTTP 請求是異步的。
JavaScript 中，通常用 3 種方式處理異步代碼。
回調(diào)（callback）
承諾（promise）
可觀察對象（observable）
promise 和 observable 主要三個(gè)主要不同：
observable 可以中途取消，promise 發(fā)出就不行
observable 可以持續(xù)發(fā)射很多值，而 promise 只能發(fā)射一個(gè)值就結(jié)束了
observable 提供了更多的工具函數(shù)，最常用的是 filter 等
想更多了解 promise 的請看
《JavaScript Promise迷你書》
想更多了解 rxjs(observable) 的請看
《rxjs中文教程》
在 Angular 中，處理異步代碼的最佳方式就是使用可觀察對象，所以接下來會(huì)用到
app.module.ts導(dǎo)入 Angular 的 HttpModule。
import { HttpModule } from "@angular/http";
//然后在 imports 中插入 HttpModule 即可
測試用接口
本來找了一些別的接口作為測試，發(fā)現(xiàn)不會(huì)顯示數(shù)據(jù)，打開 Chrome 測試了一下發(fā)現(xiàn)有跨域問題。
XMLHttpRequest cannot load
所以這里給大家推薦個(gè)網(wǎng)站，我們就用他來進(jìn)行測試。
http://jsonplaceholder.typico...
拖到下面的 Resources 可以看到圖片。從圖中可以看出接口種類還是比較豐富的，我們選擇帶圖片的 /photos 進(jìn)行測試。
home.tsimport { Http, Response } from "@angular/http";
@Component({
selector: "page-home",
templateUrl: "home.html"
})
export class HomePage {
// 接收數(shù)據(jù)用
listData: Object;
// 依賴注入
constructor(public navCtrl: NavController, private http: Http) {
}
ionViewDidLoad() {
// 網(wǎng)絡(luò)請求
this.http.request("http://jsonplaceholder.typicode.com/photos")
.subscribe((res: Response) => {
this.listData = res.json();
});
}
http.request 會(huì)返回一個(gè) Observable 對象。我們可以使用 subscribe 訂閱變化。
當(dāng) http.request 從服務(wù)器返回一個(gè)流時(shí)，它就會(huì)發(fā)出一個(gè) Response 對象。我們用 json 方法提取出響應(yīng)體解析成一個(gè) Object，最后將它賦值給 this.listData。
home.html
