ionic3項目實戰(zhàn)教程 - 第3講 ?ionic3封裝全局網(wǎng)絡請求服務app.service

這一講主要包含以下幾個部分

• 配置全局的接口地址；
• 封裝http get請求參數(shù)編碼；
• 封裝特定http get請求；
• 封裝特定http post請求；
• 封裝全局的alert和toast；
• 封裝全局獲取/移除緩存數(shù)據(jù)的函數(shù)
• 在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, ) { }

    // 對參數(shù)進行編碼
    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('請檢查參數(shù)類型是否匹配');
        }
        if (error.status == 404) {
            msg = '請求資源不存在(code：404)';
            console.error(msg + '，請檢查路徑是否正確');
        }
        if (error.status == 500) {
            msg = '服務器發(fā)生錯誤(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網(wǎng)絡請求之前，需要導入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 { }

完！