1 描述
在开发过程中,经常需要用到公共方法,而ionic中的公共方法就是服务。
常用服务有:HTTP服务、打电话服务、数据持久化服务、提示服务。
服务优点:便于维护。
2 HTTP服务
好处:对Ajax进行封装,使得请求更加简单、方便使用。
定义:
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/RX';
import { DataService } from './data.service';
@Injectable()
export class HttpService {
authParams;
constructor(public http: Http,public dataService: DataService,public loadingCtrl: LoadingController) {
this.dataService.getLoginUserData().then(data=>{
this.authParams = data;
});
}
//添加服务器地址
private dealUrl(url){
url = 'http://192.168.32.105:8005/' + url;
return url
}
//添加登录信息
private dealUrlAuth(url){
let data = this.authParams;
if(data != null){
url = url + "?Token=" + data.token +
"&UserID=" + data.userId +
"&UserName="+ data.userName;
}
return url;
}
//分页
private dealPostParamForPage(params,pageIndex,pageSize,sort){
let param = {
data:params,
PageIndex:pageIndex,
PageSize:pageSize,
Sort:sort
}
return param;
}
//加载
private loadingCreate(isLoading:true,pageIndex?){
let loading = this.loadingCtrl.create({
content: ''
});
pageIndex = typeof(pageIndex)=='undefined'?1:pageIndex;
isLoading = typeof(isLoading)=='undefined'?true:isLoading;
if(isLoading == true && pageIndex == 1)
{
loading.present();
}
return loading;
}
//返回处理
private dealRe(re,loading){
loading.dismiss();
return re.json();
}
//异常处理
private dealError(error:any,loading){
let errMsg = (error.message)?error.message:
error.status?'${error.status}-{error.statusText}':'Server error';
loading.dismiss();
return Observable.throw(errMsg);
}
//post请求
postNoAuth(url:string,params,isLoading?){
let loading = this.loadingCreate(isLoading);
url = this.dealUrl(url);
return this.http.post(url,params)
.map(data=>this.dealRe(data,loading))
.catch(data=>this.dealError(data,loading));
}
//post请求
postAuth(url:string,params,pageIndex=1,pageSize=10,sort='time',isLoading?){
let loading = this.loadingCreate(isLoading,pageIndex);
url = this.dealUrl(url);
url = this.dealUrlAuth(url);
params = this.dealPostParamForPage(params,pageIndex,pageSize,sort);
return this.http.post(url,params).map(data=>this.dealRe(data,loading)).catch(data=>this.dealError(data,loading));
}
//post请求 queryString='&key1=value1&...'
postAuthForm(url:string,params,queryString?,isLoading?){
let loading = this.loadingCreate(isLoading);
url = this.dealUrl(url);
url = this.dealUrlAuth(url);
url = url +queryString;
params = this.dealPostParamForPage(params,null,null,null);
return this.http.post(url,params).map(data=>this.dealRe(data,loading)).catch(data=>this.dealError(data,loading));
}
}
使用:
this.httpService.postNoAuth(api,this.user).subscribe(data=>{
console.log('login',data);
if(data.RetCode == 1){//登录成功
this.loginUserModel.userType = this.userType;
this.loginUserModel.token = data.Addition.Token;
this.loginUserModel.userId = data.Addition.ID;
this.loginUserModel.userName = data.Addition.Name;
this.dataService.saveLoginUserData(this.loginUserModel).then(data=>{
this.httpService.authParams = data;
if(this.userType =='0'){
pushPage = DoctorTabsPage;
}
else{
pushPage = PersonTabsPage;
}
this.app.getRootNav().setRoot(pushPage);
});
}else{//登录失败
this.tipsService.tipsBottom(data.Message);
}
});
3 打电话服务
好处:统一打电话事件,方便修改,如:希望拨打前有提示,这样只修改服务就行了。
定义:
import { AlertController } from 'ionic-angular';
import { CallNumber } from 'ionic-native';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class CallService {
constructor(public alertCtrl: AlertController) {
}
//拨打电话-询问
callConfirm(number){
let confirm = this.alertCtrl.create({
title: '拨打电话',
message: '您确定需要拨打' + number + '吗?',
buttons: [
{
text: '取消',
handler: () => {
}
},
{
text: '确定',
handler: () => {
this.call(number);
}
}
]
});
confirm.present();
}
//拨打电话-直接拨打
call(number){
CallNumber.callNumber(number, true)
.then(() => console.log('Launched dialer!'))
.catch(() => console.log('Error launching dialer'));
}
}
使用:
call(number){
this.callService.callConfirm(number);
}
4 数据持久化服务
定义:
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';
@Injectable()
export class Data {
constructor(public storage: Storage) {}
//获取持久化数据
getData(key){
return this.storage.get(key);
}
//保存持久化数据
saveData(key,data){
return this.storage.set(key,data);
}
//清除持久化数据
clearData(key){
this.storage.remove(key);
this.getData(key).then((data)=>{
console.log(key + "信息清除:" + data);
});
}
}
5 提示服务
好处:浏览器调试时使用H5,真机时使用原生。
代码:
import { Injectable } from '@angular/core';
import { Toast } from '@ionic-native/toast';
import { ToastController } from 'ionic-angular';
import 'rxjs/add/operator/map';
@Injectable()
export class TipsService {
constructor(private toastCtrl: ToastController,public toast:Toast) {
}
tipsBottom(tips) {
try{
this.toast.show(tips, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
}
catch(err) {
let toast = this.toastCtrl.create({
message: tips,
duration: 5000,
position: 'center'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}
}