Ionic2跨平台项目（二）网络请求及使用实体类

创建好Ionic2项目后，作为完全入门者，除了系统学习angular2、typescript语法之外，需要通过实现一些小功能来练习和熟悉项目的结构和angular2的思想，做一个简单的登录界面demo，实现基本的网络请求和数据使用。

20170503更新：ionic已更新http用法，所以每次使用还是尽量先查看ionic官网，网址在文章最后有。

1、首先，创建login目录，终端输入：

$ ionic g page login

2、在login.html中实现界面布局：

<ion-content  class="page-login"><ion-header>  <ion-navbar>    <button ion-button icon-only menuToggle >      <ion-icon name="menu"></ion-icon>    </button>    <ion-title>Login</ion-title>  </ion-navbar></ion-header><ion-content>  <form (submit)="processForm()" [formGroup]="form">     <ion-img class="logo" width="180" height="180" src="assets/img/[e-mail]"></ion-img>      <ion-list>        <ion-item>          <ion-label>账号</ion-label>          <ion-input formControlName="account" type="text"></ion-input>        </ion-item>        <ion-item>          <ion-label>密码</ion-label>          <ion-input formControlName="password" type="password"></ion-input>        </ion-item>      </ion-list>    <div padding>          <button class="login" ion-button block type="submit" (click)="loginClick()">Login</button>      <div>        <ion-list>          <ion-row id="check">           <ion-checkbox checked="true"></ion-checkbox>            <ion-label>记住密码</ion-label>            <ion-checkbox color="secondary" checked="true"></ion-checkbox>            <ion-label>自动登录</ion-label>            <ion-label>忘记密码？</ion-label>          </ion-row>        </ion-list>        <p><span class="line"></span><span>设置服务器</span><span class="line"></span></p>      </div>    </div>  </form></ion-content>

3、在login.scss文件中添加界面样式：

.page-login {.img-loaded{    background-color:#fff;    position: relative;    left: 50%;    margin-left: -90px;    top: 30px;  }  .login{    background-color:#f56723;    margin:20px 0;  }  p{    width: 100%;    margin-top: 120px;    color: #999;    text-align:center;  }  p span{     display: inline-block;     width: 80px;    font-family: "微软雅黑"  }  p .line{    width:80px;    height:1px;    background-color:#999;  }  .list-ios{    margin:-1px 0 32px 2px;    font-family: "微软雅黑"  }  .label-ios,.label-md{    margin: 0;  }  .list-ios > .item-block:first-child{    border-top:none;  }  .item-input ion-input{    height:45px;    line-height:45px;    color:#666;  }  .text-input-ios{    margin:0;  }  .item-ios{    width: 300px;    margin: 0 auto;  }  .list-ios > .item-block:last-child .item-inner{    border-bottom: 0.55px solid #c8c7cc;  }  .list-ios > .item-block:last-child{    border-bottom: none;  }  .label-ios{    color:#666;  }}

4、添加网络请求工具类，水平有限，只做了简单抽取，这里用的是post，get肯定一样可以用，首先添加插件：

$ ionic plugin add cordova-plugin-http

export class HttpClient {      constructor(){  }  getDataFromUrl(url: string, body: any, headers: any): Promise<TestModel> {      console.log('sendRequest')      return HTTP.post(url, body,headers).then(res => {          return JSON.parse(res.data)      }).catch(err => {          return err.error      })  }}

5、添加模型（实体）类（到底该用class还是interface我也不清楚，还在学）：

export interface TestModel {    id: string;    idCode: string;    peName: string;}

6、在login.ts中：

import { HttpClient } from '../../utils/HttpClient'

之后就可以在点击事件方法里调用网络请求的工具类方法：

    this.httpDelegate.getDataFromUrl('自己写个url试试', data, {}).then(model => {        console.log(model.id)    }).catch(err => {        console.log(err)    })  }

7、在login.ts已经能正常拿到转成模型的数据了，之后就可以为所欲为了。

8、工具类中指定模型名字不方便复用，听说可以用泛型，HttpClient.ts修改成这样：

  getDataFromUrl<T>(url: string, body: any, headers: any): Promise<T> {      console.log('sendRequest')      return HTTP.post(url, body,headers).then(res => {          return JSON.parse(res.data)      }).catch(err => {          return err.error      })  }

9、在调用方法时同样在函数名后面加上类型这个参数：

    this.httpDelegate.getDataFromUrl<TestModel>('用自己的url', data, {}).then(model => {        console.log(model.id)    }).catch(err => {        console.log(err)    })  }

10、实现了复用，可以真的为所欲为了。

做这个demo过程中有几点心得：

1、我没想到ts语言json转模型这么简单，听说js有反射，所以可以直接转，搞不懂。

2、看官方文档是很有必要的：https://ionicframework.com/docs/v2/native/http/。

3、某些ES2015特性需要学，比如Promise咋用：http://www.cnblogs.com/lvdabao/p/es6-promise-1.html。

4、ionic2调试是个事，我下篇博客研究研究。