angular访问后台服务及监控会话超时的封装实现

angular本身自带访问组件http和httpclient，组件本身都是异步模式访问。本文只列举了对http组件的封装同时也一同处理会话超时监控。 

实现思路概述：

1、将请求入参和出参统一约定

2、封装方法将请求参数、数据处理方法、数据呈现方法、访问错误处理方法封装在一起，业务调用通过服务调用该封装方法，
同时把请求参数、数据处理方法、数据呈现方法、访问错误处理方法传过来即可

3、在每次请求交互时，都会记录当前请求时间。系统工作台组件中增加监控处理，判断是否超时，超时分钟可自定义

下面是相关实现代码：

1、封装方法

import { NgModule } from ‘@angular/core‘;
import { Injectable } from ‘@angular/core‘;
import { HttpModule, Headers, Http, Response, Request, RequestOptionsArgs, ResponseOptionsArgs, RequestOptions } from ‘@angular/http‘;
import { trigger, state, style, transition, animate, keyframes } from ‘@angular/animations‘;

import { Observable } from ‘rxjs/Observable‘;
import ‘rxjs/add/operator/catch‘;
import ‘rxjs/add/operator/map‘;
import ‘rxjs/add/operator/toPromise‘;

//使用三方js库
declare var CryptoJS:any;

@Injectable()
export class CommonRootService {

constructor(private http: Http) { }

//AES加密
public encrypt(word: string, key: string, iv: string): string {
let keys = CryptoJS.enc.Utf8.parse(key);
let ivs = CryptoJS.enc.Utf8.parse(iv);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, keys, { iv: ivs, mode: CryptoJS.mode.CBC });
return encrypted.toString();
}

public decrypt(word: string, key: string, iv: string) {
let keys = CryptoJS.enc.Utf8.parse(key);
let ivs = CryptoJS.enc.Utf8.parse(iv);
let decrypt = CryptoJS.AES.decrypt(word, keys, { iv: ivs, mode: CryptoJS.mode.CBC });
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

public delayTimeMS(msseconds: number = 0): void {
for (let t = Date.now(); Date.now() - t <= msseconds;);
}

//Manage onlineTime,记录当前在线时间
public sessionMgt_onlineTime(currrOnLineTime: string, actionflag: string): any {
var resobjs: any;
if (actionflag == "R") {
if (localStorage.getItem("sessiononlineTime") != null && localStorage.getItem("sessiononlineTime").toString() != "") {
resobjs = localStorage.getItem("sessiononlineTime");
}
}
else if (actionflag == "S") {
localStorage.setItem("sessiononlineTime", currrOnLineTime);
}
else if (actionflag == "D") {
localStorage.removeItem(‘sessiononlineTime‘);
}
return resobjs;
}

//整体封装localStorage session管理
public sessionMgt(sessionName:string, sessionValue: string, actionflag: string): any {
let resobjs: any;
let sessionNames:string = "session" + sessionName;
if (actionflag == "R") {
if (localStorage.getItem(sessionNames) != null && localStorage.getItem(sessionNames).toString() != "") {
resobjs = localStorage.getItem(sessionNames);
}
}
else if (actionflag == "S") {
localStorage.setItem(sessionNames, sessionValue);
}
else if (actionflag == "D") {
localStorage.removeItem(sessionNames);
}
return resobjs;
} 

//http encapsulation
public getHttpInfoData(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.Reqmethod == "") {
reqdata.Reqmethod = "get";
}
if (reqdata.ReqdataType == "") {
reqdata.ReqdataType = "application/json";
}
let dataTypeStr = ‘json‘;
let currReqAddr: string = this.getCurrServAddr(reqdata);
let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌
this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

//let headers = new Headers({ ‘Content-Type‘: reqdata.ReqdataType, dataType: dataTypeStr, ‘Authorization‘: ‘Basic ‘ + btoa("" + ":" + selecttoken) });
let headers = new Headers({ ‘Content-Type‘: reqdata.ReqdataType, ‘token‘: selecttoken });
let options = new RequestOptions({ headers: headers });

let bizparams: any = { ‘req‘: JSON.stringify(reqdata) };

if (reqdata.Reqmethod == "post") {
this.http.post(currReqAddr, bizparams, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(currReqAddr, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}
//http encapsulation with token
public getHttpInfoDataAuth(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.Reqmethod == "") {
reqdata.Reqmethod = "get";
}
if (reqdata.ReqdataType == "") {
reqdata.ReqdataType = "application/json";
}
let dataTypeStr = ‘json‘;
let currReqAddr: string = this.getCurrServAddr(reqdata);
let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌

this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

//let headers = new Headers({ ‘Content-Type‘: reqdata.ReqdataType, dataType: dataTypeStr, ‘Authorization‘: ‘Basic ‘ + btoa("" + ":" + selecttoken) });
let headers = new Headers({ ‘Content-Type‘: reqdata.ReqdataType, ‘token‘: selecttoken });
let options = new RequestOptions({ headers: headers });

let bizparams: any = { ‘req‘: JSON.stringify(reqdata) };

if (reqdata.Reqmethod == "post") {
this.http.post(currReqAddr, bizparams, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(currReqAddr, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}

public getHandlerError(error: Response | any, userErrFunc: any) {
let errMsg: string;
if (error instanceof Response) {
let body = error.json() || ‘‘;
let err = body.error || JSON.stringify(body);
errMsg = err;
} else {
errMsg = error.message ? error.message : error.toString();
}
userErrFunc(errMsg);
return Observable.throw(errMsg);
}

//http encapsulation webapi请求
public getHttpInfoDataWebapi(reqdata: Reqobj, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.reqmethod == "") {
reqdata.reqmethod = "get";
}
if (reqdata.reqdatatype == "") {
reqdata.reqdatatype = "application/json; charset=utf-8"; 
//reqdata.reqdatatype = "application/x-www-form-urlencoded;charset=UTF-8";
}
let dataTypeStr = ‘json‘;

let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌
this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

let headers = new Headers();
headers.append(‘Content-Type‘, reqdata.reqdatatype); 
let options = new RequestOptions({ headers: headers});
if (reqdata.reqmethod == "post") {
this.http.post(reqdata.dataUrl, reqdata, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(reqdata.dataUrl, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}
//获取当前服务
public getCurrentServ(serviden: string, versioniden: string, servtype: string, servconfig: any): any {
let reqServ = {}; //返回当前服务 
if (servconfig != "" && servconfig != undefined) {
let servconfigArrr: any = JSON.parse(servconfig);
if (servconfigArrr.length > 0) {
for (let i = 0; i < servconfigArrr.length; i++) {
if (servconfigArrr[i]["serviden"] == serviden && servconfigArrr[i]["version"] == versioniden) {
reqServ = servconfigArrr[i];
break;
}
}
}
}

return reqServ;
}

//获取当前请求地址
//reqdata.Addrtype参数值为nodecenter(节点中心地址)、xxx(业务节点地址)、terminal(终端网页地址)
public getCurrServAddr(reqdata: RequestParams): string {
let resServAddr: string = "";
let servconfigmgt: any = this.getCurrentServ(reqdata.ServIdentifer, reqdata.ServVersionIden, reqdata.ServVersionIden, this.getUseServices());
if (servconfigmgt) {
if (servconfigmgt.url_addr != "" && servconfigmgt.url_addr != undefined) {
resServAddr = servconfigmgt.url_addr + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
}
else {
if (reqdata.AddrType == "nodecenter") {
//TODO 预留自动监控节点中心状态，变更可用节点中心地址
let nodecenterobj: any = JSON.parse(this.sessionMgt("getNodeCenterAddr", "", "R"));
let nodecenteraddress: string = "";
if (nodecenterobj.master_node_state == "1") {
nodecenteraddress = nodecenterobj.master_node;
}
else if (nodecenterobj.slave_node_state == "1") {
nodecenteraddress = nodecenterobj.slave_node;
}
resServAddr = nodecenteraddress + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
//resServAddr = "/api/" + servconfigmgt.servcodename + reqdata.GetDataUrl; 
} 
else if (reqdata.AddrType == "terminal") {
resServAddr = reqdata.GetDataUrl;
}
else if (reqdata.AddrType == "PlcService") {
resServAddr = reqdata.Reqtype + reqdata.GetDataUrl;
}
else {
//获取请求模块当前可用节点地址
let bizNodeList:any[] = JSON.parse(this.sessionMgt("getBizNodeAddr", "", "R"));
let moudineAdd:string = "";
for (let i = 0; i < bizNodeList.length; i++) {
if (bizNodeList[i].Moudiden == reqdata.AddrType) {
moudineAdd = bizNodeList[i].Url_addr;
break;
}
}
resServAddr = moudineAdd + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
}
}
}

return resServAddr;
}

//计算时间差,resFlag表示时间差的类型 d 相差天数 h 相差小时数 m 相差分钟数 s 相差秒数, ms 相差秒数,其他后续再扩展 
public dateTimeSeg(startTimeStr: string, endTimeStr: string, resFlag: string): number {
let difValue: number = 0; //相差的数值

let startTime: Date = new Date(startTimeStr);
let endTime: Date = new Date(endTimeStr);

let startDateMS: number = startTime.getTime(); //到日期的毫秒数
let endDateMS: number = endTime.getTime(); //到日期的毫秒数
//相差总毫秒数
let tottleDiffMS: number = endDateMS - startDateMS;

if (resFlag == "d") {

difValue = Math.floor(tottleDiffMS / (24 * 3600 * 1000));

}
else if (resFlag == "h") {

difValue = Math.floor(tottleDiffMS / (3600 * 1000));

}
else if (resFlag == "m") {

difValue = Math.floor(tottleDiffMS / (60 * 1000));

}
else if (resFlag == "s") {

difValue = Math.floor(tottleDiffMS / (1000));

}
else if (resFlag == "ms") {

difValue = tottleDiffMS;

}

return difValue;

}

}

//Public structure definition

//request parameters encapsulation
export class RequestParams {
public GetDataUrl: string = "";
public Reqtype: string = "";
public Reqmethod: string = "";
public ReqdataType: string = "";
public Reqdata: string = "";
public Reqi18n: string = "";
public ServIdentifer: string = "";
public ServVersionIden: string = "";
//AddrType 参数值为nodecenter(节点中心地址)、biznode(业务节点地址)、terminal(终端网页地址)
public AddrType: string = "";
}

//response parameters encapsulation
export class ResponseParams {
public respflag: string = "";
public resptoolstr: string = "";
public respdata: string = "";
public pagertottlecounts: string = "";
}

//request parameters encapsulation webapi
export class Reqobj {
public dataUrl:string = "";
public reqtype: string = "";
public reqmethod: string = "";
public reqdatatype: string = "";
public sn: string = "";
public output: string = "";
public reqiden: string = "";
public reqdataiden: string = "";
public reqdatas: string = "";
public reqi18n: string = "";
public reqversion: string = "";

constructor(_dataUrl:string, _reqtype:string, _reqmethod:string, _reqdatatype:string,
_sn: string, _output: string, _reqdataiden: string, _reqdatas: string, _reqi18n: string,
_reqiden: string, _reqversion: string) {
this.dataUrl = _dataUrl;
this.reqtype = _reqtype;
this.reqmethod = _reqmethod;
this.reqdatatype = _reqdatatype;
this.sn = _sn;
this.output = _output;
this.reqdataiden = _reqdataiden;
this.reqdatas = _reqdatas;
this.reqi18n = _reqi18n; 
this.reqiden = _reqiden;
this.reqversion = _reqversion;
}
}
export class Reqdata {
public key: string = "";
public value: string = "";
}
export class response {
public status: string = "";
public datetime: string = "";
public respdatas: string = "";
public tottlerecords: string = "";
public resperrordatas: string = "";
}

//检查数据库参数
export class CheckBizObjectRepatParams {
public Bizobjectname: string = "";
public WherePropertyL: any[] = [];
public Splitchar: string = "";
}

2、监控超时

//超时处理函数，直接退出系统路由到退出提示组件
timeOutFunction(): void {

let nodecenterobj: any = JSON.parse(this.commonmodule.getNodeCenterAddr());
let currDate: Date = new Date(); //当前时间

let difvalue: number = this.commonmodule.dateTimeSeg(this.commonmodule.sessionMgt_onlineTime("", "R"), currDate.toJSON(), "m");
let tiemoutValue: number = parseInt(nodecenterobj.timeOutMinutes);

if (difvalue > tiemoutValue) {
if (this.quitFlag != "TimeOut") {
this.quitFlag = "TimeOut";
this.router.navigateByUrl("quitsystem"); 
}
}
}

3、调用样例

服务样例：

import { Injectable } from ‘@angular/core‘;
import { CommonRootService, MainValueName, PagingParam, RequestParams, ResponseParams } from ‘../common_module/common.service‘;

@Injectable()
export class SysmanagerService {
constructor(private commonmodule: CommonRootService) { }

//获取用户组名
getGroupName(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {

this.commonmodule.getHttpInfoDataAuth(reqdata, resdataFunc, displayresdataFunc, errorFunc);

}

}//class end

调用样例：

//查询数据
querydata(): void {
this.getData(1);
}

getData(currpageindex: number): void {
this.condiv = true;

//this.pagingParam.PageSize = 5; //默认10
this.pagingParam.PageIndex = currpageindex;

let currqueryobj: any = {};
currqueryobj.GROUPID = this.groupname;
currqueryobj.ISUSE = this.isuse;

let groupreqobj = [{ queryItemKey: "SSY_PagingParam", queryItemValue: JSON.stringify(this.pagingParam) },
{ queryItemKey: "SSY_GROUP_DICT", queryItemValue: JSON.stringify(currqueryobj) }];

let reqdata: RequestParams = new RequestParams();
reqdata.AddrType = "FrameMgt";
reqdata.GetDataUrl = "/FrameApi/GetGroupPagerN";
reqdata.Reqmethod = "post";
reqdata.Reqdata = JSON.stringify(groupreqobj);
reqdata.ReqdataType = "";
reqdata.Reqtype = "getgroupdata";
reqdata.Reqi18n = this.commonmodule.getI18nlang();
reqdata.ServIdentifer = "frameManager";
reqdata.ServVersionIden = "1.0";

this.sysmanagerServ.getGroups(reqdata,
res => this.getDataResdataFunc(res), res => this.getDataDisplaydataFunc(res), err => this.getDataErrorFunc(err));
}

getDataResdataFunc(data: any): any {
return data;
}
getDataDisplaydataFunc(data: any): void {
this.condiv = false;
this.bindcurrdata = [];
this.tottlecounts = 0;
this.currdata = [];
this.olddata = [];
if (data.status == 200) {
let respdata: ResponseParams = JSON.parse(JSON.parse(data._body));
if (respdata.respflag == "1") {
let binddata: any = [];
binddata = JSON.parse(respdata.respdata);
for (var i = 0; i < binddata.length; i++) {
if (binddata[i]["ISUSE"] == "1") {
binddata[i]["ISUSE"] = true;
}
else {
binddata[i]["ISUSE"] = false;
}
}
this.currdata = this.commonmodule.copyArrayToNewArray(binddata);
this.olddata = this.commonmodule.copyArrayToNewArray(binddata);
this.tottlecounts = +respdata.pagertottlecounts;

this.bindcurrdata = [];
this.bindcurrdata = this.commonmodule.copyArrayToNewArray(binddata);
}
else {
this.errorinfos = [];
this.errorinfos.push({ severity: ‘warn‘, summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeNoFoundData });
}
}
else {
this.errorinfos = [];
this.errorinfos.push({ severity: ‘warn‘, summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeError });
}
}
getDataErrorFunc(err: string) {
this.errorinfos = [];
this.errorinfos.push({ severity: ‘warn‘, summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeHttpError_info + err });
this.condiv = false;
}

原文：https://www.cnblogs.com/maotou/p/angular.html