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、判断是否获取成功,若成功进行下一步操作,否则弹出错误信息,截图如下:
