ionic3项目实战教程 - 第3讲 �ionic3封装全局网络请求服务app.service

这一讲主要包含以下几个部分

• 配置全局的接口地址；
• 封装http get请求参数编码；
• 封装特定http get请求；
• 封装特定http post请求；
• 封装全局的alert和toast；
• 封装全局获取/移除缓存数据的函数
• 在app.module的providers注入全局服务类；

新建一个类，命名为app.service.ts，位于�src/app/目录下，具体代码如下：

app.service.ts

import { LoadingController, AlertController, ToastController } from 'ionic-angular';import { Injectable } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/toPromise';@Injectable()export class AppGlobal {    //缓存key的配置    static cache: any = {        slides: "_dress_slides",        categories: "_dress_categories",        products: "_dress_products"    }    //接口基地址    static domain = "https://tlimama.tongedev.cn"    //接口地址    static API: any = {        getCategories: '/api/ionic3/getCategories',        getProducts: '/api/ionic3/getProducts',        getDetails: '/api/ionic3/details'    };}@Injectable()export class AppService {    constructor(public http: Http, public loadingCtrl: LoadingController, private alertCtrl: AlertController, private toastCtrl: ToastController, ) { }    // 对参数进行编码    encode(params) {        var str = '';        if (params) {            for (var key in params) {                if (params.hasOwnProperty(key)) {                    var value = params[key];                    str += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';                }            }            str = '?' + str.substring(0, str.length - 1);        }        return str;    }    httpGet(url, params, callback, loader: boolean = false) {        let loading = this.loadingCtrl.create({});        if (loader) {            loading.present();        }        this.http.get(AppGlobal.domain + url + this.encode(params))            .toPromise()            .then(res => {                var d = res.json();                if (loader) {                    loading.dismiss();                }                callback(d == null ? "[]" : d);            })            .catch(error => {                if (loader) {                    loading.dismiss();                }                this.handleError(error);            });    }    httpPost(url, params, callback, loader: boolean = false) {        let loading = this.loadingCtrl.create();        if (loader) {            loading.present();        }        this.http.post(AppGlobal.domain + url, params)            .toPromise()            .then(res => {                var d = res.json();                if (loader) {                    loading.dismiss();                }                callback(d == null ? "[]" : d);            }).catch(error => {                if (loader) {                    loading.dismiss();                }                this.handleError(error);            });    }        private handleError(error: Response | any) {        let msg = '';        if (error.status == 400) {            msg = '请求无效(code：404)';            console.log('请检查参数类型是否匹配');        }        if (error.status == 404) {            msg = '请求资源不存在(code：404)';            console.error(msg + '，请检查路径是否正确');        }        if (error.status == 500) {            msg = '服务器发生错误(code：500)';            console.error(msg + '，请检查路径是否正确');        }        console.log(error);        if (msg != '') {            this.toast(msg);        }    }    alert(message, callback?) {        if (callback) {            let alert = this.alertCtrl.create({                title: '提示',                message: message,                buttons: [{                    text: "确定",                    handler: data => {                        callback();                    }                }]            });            alert.present();        } else {            let alert = this.alertCtrl.create({                title: '提示',                message: message,                buttons: ["确定"]            });            alert.present();        }    }    toast(message, callback?) {        let toast = this.toastCtrl.create({            message: message,            duration: 2000,            dismissOnPageChange: true,        });        toast.present();        if (callback) {            callback();        }    }    setItem(key: string, obj: any) {        try {            var json = JSON.stringify(obj);            window.localStorage[key] = json;        }        catch (e) {            console.error("window.localStorage error:" + e);        }    }    getItem(key: string, callback) {        try {            var json = window.localStorage[key];            var obj = JSON.parse(json);            callback(obj);        }        catch (e) {            console.error("window.localStorage error:" + e);        }    }}

配置完全局服务类之后，还需要做以下两点更改：

• 1.在app.module的providers注入全局服务类；
• 2.因ionic3一些新特性的加入，在使用http网络请求之前，需要导入HttpModule模块；

app.module.ts具体代码如下：

import { HttpModule } from '@angular/http';import { AppService } from './app.service';import { NgModule, ErrorHandler } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';import { MyApp } from './app.component';import { StatusBar } from '@ionic-native/status-bar';import { SplashScreen } from '@ionic-native/splash-screen';@NgModule({declarations: [    MyApp],imports: [    BrowserModule, HttpModule,    IonicModule.forRoot(MyApp)],bootstrap: [IonicApp],entryComponents: [    MyApp],providers: [    StatusBar,    SplashScreen, AppService,    { provide: ErrorHandler, useClass: IonicErrorHandler }]})export class AppModule { }

完！