主要内容
- 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
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
return this.request(url, new RequestOptions({
method: RequestMethod.Get,
search: HttpService.buildURLSearchParams(paramMap)
}));
}
public post(url:string, body:any = null):Observable {
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 {
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);
})