1、在app.module.ts引用HttpModul，并在imports內引用。截圖如下：

頂部引用

ngModule內引用

2、在src目錄下新建http服務。命令行：ionic g provider HttpService

3、http-service.ts的代碼如下：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class HttpService {
private rootUrl: string;
constructor(private http: Http) {
this.rootUrl = AppConfig.appUrl();
}
public get(url: string, paramObj: any) {
return this.http.get(url + this.toQueryString(paramObj))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public post(url: string, paramObj: any) {
let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
return this.http.post(url, this.toBodyString(paramObj), new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public postBody(url: string, paramObj: any) {
let headers = new Headers({'Content-Type': 'application/json'});
return this.http.post(url, paramObj, new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
private handleSuccess(result) {
if (result && !result.success) {//由于和后臺約定好,所有請求均返回一個包含success,msg,data三個屬性的對象,所以這里可以這樣處理
console.log(result.msg);//這里使用ToastController
}
return result;
}
private handleError(error: Response | any) {
let msg = '請求失敗';
if (error.status == 0) {
msg = '請求地址錯誤';
}
if (error.status == 400) {
msg = '請求無效';
console.log('請檢查參數類型是否匹配');
}
if (error.status == 404) {
msg = '請求資源不存在';
console.error(msg+'，請檢查路徑是否正確');
}
console.log(error);
console.log(msg);//這里使用ToastController
return {success: false, msg: msg};
}
/**
* @param obj　參數對象
* @return {string}　參數字符串
* @example
* 聲明: var obj= {'name':'小軍',age:23};
* 調用: toQueryString(obj);
* 返回: "?name=%E5%B0%8F%E5%86%9B&age=23"
/
private toQueryString(obj) {
if(obj == null){
return "";
}
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//數組
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return '&' + ret.join('&');
}
/*
*
* @param obj
* @return {string}
* 聲明: var obj= {'name':'小軍',age:23};
* 調用: toQueryString(obj);
* 返回: "name=%E5%B0%8F%E5%86%9B&age=23"
*/
private toBodyString(obj) {
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//數組
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return ret.join('&');
}
private toQueryPair(key, value) {
if (typeof value == 'undefined') {
return key;
}
return key + '=' + encodeURIComponent(value === null ? '' : String(value));
}

4、將http-service.ts引入到app.module.ts里面，并聲明，截圖如下：

頂部引用

聲明

5、在app目錄下，新建app.config.ts用于定義全局變量、域名等信息（注意：這個ts文件不需要在app.module.ts引入），截圖如下：

后臺數據接口的域名

6、在http-service.ts引入app.config.ts，截圖如下：

引入config

7、在providers目錄下的http-service.ts寫入獲取的數據接口

（注意：this.rootUrl在app.config.ts設置了本地域名，壓縮提交前，需要修改成外網域名），截圖如下：

登錄接口

8、在login.ts上面引入服務，截圖如下：

http服務

http服務

9、登錄提交數據表單驗證：

• Login.html的表單，需要用戶提交的信息，截圖如下：

ionic2表單驗證

• Login.ts寫入對應表單的信息驗證，截圖如下：

ionic2表單驗證

10、在login.ts新建login()方法，獲取用戶提交的參數userObj.??，與數據接口的參數匹配，截圖如下：

后臺數據與前臺輸出數據對接

11、判斷是否獲取成功，若成功進行下一步操作，否則彈出錯誤信息，截圖如下：

判斷獲取數據是否成功