ionic2+Angular2:套接口明细步骤，以登录功能为例

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

 

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，截图如下：

7、在providers目录下的http-service.ts写入获取的数据接口

（注意：this.rootUrl在app.config.ts设置了本地域名，压缩提交前，需要修改成外网域名），截图如下：

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

 

9、登录提交数据表单验证：

• Login.html的表单，需要用户提交的信息，截图如下：

• Login.ts写入对应表单的信息验证，截图如下：

10、在login.ts新建login()方法，获取用户提交的参数userObj.??，与数据接口的参数匹配，截图如下：

11、判断是否获取成功，若成功进行下一步操作，否则弹出错误信息，截图如下：