ionic2(仿單糖app)-04網(wǎng)絡請求封裝

主要內容

  • http get 請求
  • http post 請求
  • 全局的工具類
新建一個http請求類服務

HttpService.ts

/**
 * Created by Void on 2017/7/13.
 *
 *  網(wǎng)絡請求服務類
 */

import {Injectable} from '@angular/core';
import {
    Http, Headers, RequestOptions, URLSearchParams, RequestOptionsArgs, RequestMethod
} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Observable} from "rxjs";
import {NativeServiceC} from "./NativeServiceC";
import {AlertController} from "ionic-angular";
import {APP_SERVE_URL} from "./Constants";

@Injectable()
export class HttpService {

    constructor(public http:Http,
                private nativeService:NativeServiceC,
                private alertCtrl:AlertController) {
    }

    public request(url:string, options:RequestOptionsArgs) { //:Observable<Response>
        url = HttpService.formatUrl(url);
        this.optionsAddToken(options);
        return Observable.create(observer => {
            this.nativeService.showLoading();
            this.http.request(url, options)
                .map(res => res.json())
                .subscribe(res => {
                    if (res.code == 200) {
                        observer.next(res.data);
                    } else {
                        this.requestFailed(url, options, {status: res.code});//處理請求失敗
                    }
                }, err => {
                    this.requestFailed(url, options, err);//處理請求失敗
                    observer.error(err);
                });
        });
    }

    public get(url:string, paramMap:any = null) { //:Observable<Response>
        return this.request(url, new RequestOptions({
            method: RequestMethod.Get,
            search: HttpService.buildURLSearchParams(paramMap)
        }));
    }

    public post(url:string, body:any = null):Observable<any> {
        return this.request(url, new RequestOptions({
            method: RequestMethod.Post,
            body: body,
            headers: new Headers({
                'Content-Type': 'application/json; charset=UTF-8'
            })
        }));
    }

    public jsonRpc(model:string, method:string, args:any, kwargs?:any):Observable<any> {

        kwargs = kwargs || {};
        kwargs.context = kwargs.context || {};
        Object.assign(kwargs.context, {
            lang: "zh_CN",
            tz:"Asia/Hong_Kong"
        });

        let params = {
            model: model,
            method: method,
            args: args,
            kwargs: kwargs,
        };
        return this.request("http://101.200.124.206:4713/web/dataset/call_kw", new RequestOptions({
            method: RequestMethod.Post,
            body: this.jsonrpcBuildSender(params),
            headers: new Headers({
                'Content-Type': 'application/json; charset=UTF-8',
                "X-Openerp-Session-Id": 'a6e881e882dff5ca206b916753601873690cfbab',
                // "Authorization": "Basic " + btoa(`${null}`)
            })
        }));
    }

    public jsonRpcLogin(login: string, password: string,db?: string){
        db = db || 'hospital-saas';
        let params = {
            db : db,
            login : login,
            password : password
        };
        return this.request("http://101.200.124.206:4713/web/session/authenticate",{
            method:RequestMethod.Post,
            body: this.jsonrpcBuildSender(params),
        });
    }

    private jsonrpcBuildSender(params:Object):Object{
        let option = {
            jsonrpc: "2.0",
            method: "call",
            params: params, // payload
            id:new Date().getTime()
        };
        return option;
    }


    /**
     * 將對象轉為查詢參數(shù)
     * @param paramMap
     * @returns {URLSearchParams}
     */
    private static buildURLSearchParams(paramMap):URLSearchParams {
        let params = new URLSearchParams();
        if (!paramMap) {
            return params;
        }
        for (let key in paramMap) {
            let val = paramMap[key];

            // todo 暫時不處理時間
            // if (val instanceof Date) {
            //     val = Utils.dateFormat(val, 'yyyy-MM-dd hh:mm:ss')
            // }
            params.set(key, val);
        }
        return params;
    }

    /**
     * 處理請求失敗事件
     * @param url
     * @param options
     * @param err
     */
    private requestFailed(url:string, options:RequestOptionsArgs, err):void {
        this.nativeService.hideLoading();
        console.log('%c 請求失敗 %c', 'color:red', '', 'url', url, 'options', options, 'err', err);
        let msg = '請求發(fā)生異常', status = err.status;
        if (!this.nativeService.isConnecting()) {
            msg = '請求失敗，請連接網(wǎng)絡';
        } else {
            if (status === 0) {
                msg = '請求失敗，請求響應出錯';
            } else if (status === 404) {
                msg = '請求失敗，未找到請求地址';
            } else if (status === 500) {
                msg = '請求失敗，服務器出錯，請稍后再試';
            }
        }
        this.alertCtrl.create({
            title: msg,
            subTitle: '狀態(tài)碼:' + status,
            buttons: [{text: '確定'}]
        }).present();
    }

    /**
     * url中如果有雙斜杠替換為單斜杠
     * 如:http://88.128.18.144:8080//api//demo. 替換后http://88.128.18.144:8080/api/demo
     * @param url
     * @returns {string}
     */
    private static formatUrl(url:string):string {
        if (url.indexOf('http://') == -1 && url.indexOf('https://') == -1) {
            url = APP_SERVE_URL + url;
        }
        let index = url.indexOf('//') + 2;
        return url.substring(0, index) + url.substring(index).replace(/\/\//g, '/');
    }

    private optionsAddToken(options:RequestOptionsArgs):void {
        let token = 'TOKEN'; //this.globalData.token;
        if (options.headers) {
            options.headers.append('token', token);
        } else {
            options.headers = new Headers({
                'token': token
            });
        }
    }
}

上面有幾個jsonrpc的方法可以忽略不看，是測試odoo后臺使用的
該文件中導入了 NativeServiceC服務，所以需要有該服務。

新建一個NativeService工具類服務

NativeServiceC.ts

/**
 * Created by Void on 2017/7/13.
 *
 *  調用手機硬件的類
 *
 * plugins: status splash network
 *
 *
 */

import {Injectable} from '@angular/core';
import {ToastController, LoadingController, Platform, Loading, AlertController} from 'ionic-angular';
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";
import {Network} from '@ionic-native/network';

import {GlobalData} from './GlobalData'

@Injectable()
export class NativeServiceC {
    private loading:Loading;
    private loadingIsOpen:boolean = false;

    constructor(private platform:Platform,
                private toastCtrl:ToastController,
                private alertCrl:AlertController,
                private loadingCtrl:LoadingController,
                private statusBar:StatusBar,
                private splashScreen:SplashScreen,
                private network:Network,
                private globalData:GlobalData) {
    }

    log(info):void {
        console.log('%cNativeService/' + info, 'color:#C41A16');
    }

    statusBarStyleDefault():void {
        this.statusBar.styleDefault();
    }

    splashScreenHide():void {
        this.splashScreen.hide();
    }

    getNetworkType():string {
        if (!this.isMobile()) {
            return 'wifi';
        }
        return this.network.type;
    }

    isConnecting():boolean {
        return this.getNetworkType() != 'none';
    }

    isMobile():boolean {
        return this.platform.is('mobile') && !this.platform.is('mobileweb');
    }

    isAndroid():boolean {
        return this.isMobile() && this.platform.is('android');
    }

    isIos():boolean {
        return this.isMobile() && (this.platform.is('ios') || this.platform.is('ipad') || this.platform.is('iphone'));
    }

    alert(title:string):void {
        this.alertCrl.create({
            title:title,
            buttons:[{text:'確定'}]
        }).present();
    }

    /**
     * 統(tǒng)一調用此方法顯示loading
     * @param content 顯示的內容
     */
    showLoading(content:string = ''):void {
        if (!this.globalData.showLoading){
            return ;
        }

        if (!this.loadingIsOpen){
            this.loadingIsOpen = true;
            this.loading = this.loadingCtrl.create({
                content:content
            });
            this.loading.present();
            setTimeout(() => { // 最長顯示15s
                this.loadingIsOpen && this.loading.dismiss();
                this.loadingIsOpen = false;
            },15000);
        }
    }

    /**
     * 關閉loading
     */
    hideLoading():void {
        if (!this.globalData.showLoading){
            this.globalData.showLoading = true;
        }
        this.loadingIsOpen && this.loading.dismiss();
        this.loadingIsOpen = false;
    }
}

該服務中依賴了一些Cordova插件，別忘記導入
該文件中導入了 GlobalData 服務，所以還要新建該服務。

新建一個GlobalData全局變量設置類服務

GlobalData.ts

/**
 * Created by Void on 2017/7/14.
 * 保存全局的一些數(shù)據(jù)，和單例的設置
 */

import { Injectable } from '@angular/core';

@Injectable()
export class GlobalData{

    private _showLoading:boolean = true;

    get showLoading(): boolean {
        return this._showLoading;
    }

    set showLoading(value: boolean) {
        this._showLoading = value;
    }
}
HttpService的使用
  1. app.module.ts中引入HttpService和HttpModule

import {HttpModule} from '@angular/http';
import { HttpService } from '../providers/HttpService';
import { NativeServiceC } from '../providers/NativeServiceC';
import { GlobalData } from '../providers/GlobalData';

imports: [HttpModule],
providers: [
    StatusBar,
    SplashScreen,
    Network,
    HttpService,
    NativeServiceC,
    GlobalData,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
  1. 在某一個頁面的組件中使用

import {HttpService} from '../../providers/HttpService';
import {NativeServiceC} from "../../providers/NativeServiceC";
import {GlobalData} from "../../providers/GlobalData";

constructor(public navCtrl:NavController,
                private httpService:HttpService,
                private nativeService:NativeServiceC,
                private globalData:GlobalData) { }

// 本次請求不顯示loading, 默認顯示
this.globalData.showLoading = false; 

this.httpService.get(url, sender).subscribe(res => {
            // 隱藏loading，所有請求結束后都必須手動隱藏，不會自動隱藏。
            this.nativeService.hideLoading();
            console.log(res);
        })
結束
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,527評論 19贊 139
  • 1. Java基礎部分 基礎部分的順序：基本語法，類相關的語法，內部類的語法，繼承相關的語法，異常的語法，線程的語...
    子非魚_t_閱讀 34,636評論 18贊 399
  • 創(chuàng)建http 此篇博文已舊,新版看這里 第一步在src根目錄新建一個providers文件夾,在這個文件夾新建一個...
    昵稱已被使用_閱讀 10,646評論 27贊 8
  • *面試心聲:其實這些題本人都沒怎么背,但是在上海 兩周半 面了大約10家 收到差不多3個offer,總結起來就是把...
    Dove_iOS閱讀 27,593評論 30贊 472
  • 成長要自己去發(fā)現(xiàn)！ 慢慢來，慢慢享受！ 媽媽在你身后給你最大的保護！ 愛你??寶貝！
    Era_0309閱讀 321評論 0贊 0

友情鏈接更多精彩內容