摘要:鏈接教程一安裝和配置教程二登錄頁制作教程三設置頁制作教程四安卓硬件返回鍵處理教程五基本的網絡請求這是最后一節,本節主要用最簡單網絡請求和基本的內置指令做一個演示。接收數據用依賴注入網絡請求會返回一個對象。
鏈接:
ionic3教程(一)安裝和配置
ionic3教程(二)登錄頁制作
ionic3教程(三)設置頁制作
ionic3教程(四)安卓硬件返回鍵處理
ionic3 教程(五)基本的網絡請求
這是最后一節,本節主要用最簡單網絡請求和基本的內置指令做一個演示。
對 Angular 的基本架構不熟悉的請點Angular 4.0 架構詳解
對 Angular 的內置指令不熟悉的請點Angular 4.0 內置指令全攻略
前言通常我們希望在 HTTP 請求的時候,頁面不會失去響應,所以我們的 HTTP 請求是異步的。
JavaScript 中,通常用 3 種方式處理異步代碼。
回調(callback)
承諾(promise)
可觀察對象(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.typico...
拖到下面的 Resources 可以看到圖片。從圖中可以看出接口種類還是比較豐富的,我們選擇帶圖片的 /photos 進行測試。
home.tsimport { 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首頁 {{item?.title}}
這里使用了一個 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下載地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51147.html
摘要:鏈接教程一安裝和配置教程二登錄頁制作教程三設置頁制作教程四安卓硬件返回鍵處理教程五基本的網絡請求這是最后一節,本節主要用最簡單網絡請求和基本的內置指令做一個演示。接收數據用依賴注入網絡請求會返回一個對象。 showImg(https://segmentfault.com/img/remote/1460000010805290); 鏈接: ionic3教程(一)安裝和配置 ionic...
摘要:本文是響應式編程第四章構建完整的應用程序這篇文章的學習筆記。涉及的運算符每隔指定時間將流中的數據以數組形式推送出去。中提供了一種叫做異步管道的模板語法,可以直接在的微語法中使用可觀測對象示例五一點建議一定要好好讀官方文檔。 本文是【Rxjs 響應式編程-第四章 構建完整的Web應用程序】這篇文章的學習筆記。示例代碼托管在:http://www.github.com/dashnoword...
摘要:的數據強制刷新由于的數據綁定與更新策略,有時取回數據時數據并不能引起頁面的變更,這時候就需要強制刷新頁面綁定的數據了。這次重構差不多就用了四天的時間,寫了個個個,按時交活兒希望本文可以在小應用的快速構建上給大家一個參考 作者:李宜棟 ??【 玩轉 LeanCloud 】開發者經驗分享: 學校有一個高考志愿填報的應用需要重構,之前的實現是通過構建 Laravel RESTful API ...
閱讀 1837·2021-09-23 11:21
閱讀 699·2019-08-30 15:55
閱讀 833·2019-08-29 15:40
閱讀 529·2019-08-29 12:56
閱讀 3158·2019-08-26 12:00
閱讀 3553·2019-08-23 18:24
閱讀 2247·2019-08-23 17:08
閱讀 1637·2019-08-23 17:03