ionic2开发之服务

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();
    }
  }
}