ionic2(仿单糖app)-04网络请求封装

作者: 阿飞_1217 | 来源:发表于2017-09-27 14:03 被阅读0次

主要内容

http get 请求
http post 请求
全局的工具类

新建一个http请求类服务

HttpService.ts

/**
 * Created by Void on 2017/7/13.
 *
 *  网络请求服务类
 */

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


    /**
     * 将对象转为查询参数
     * @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 = '请求发生异常', status = err.status;
        if (!this.nativeService.isConnecting()) {
            msg = '请求失败，请连接网络';
        } else {
            if (status === 0) {
                msg = '请求失败，请求响应出错';
            } else if (status === 404) {
                msg = '请求失败，未找到请求地址';
            } else if (status === 500) {
                msg = '请求失败，服务器出错，请稍后再试';
            }
        }
        this.alertCtrl.create({
            title: msg,
            subTitle: '状态码:' + 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();
    }

    /**
     * 统一调用此方法显示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.
 * 保存全局的一些数据，和单例的设置
 */

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的使用

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}
  ]

在某一个页面的组件中使用

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

ionic2(仿单糖app)-04网络请求封装

主要内容

新建一个http请求类服务

新建一个NativeService工具类服务

新建一个GlobalData全局变量设置类服务

HttpService的使用

结束

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读