版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/84583483
简易版HTTP服务
xxx.service.ts结构如下:
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root',
})
export class EvaluationService {
private EvaluationUrl = 'http://xxx.xxx.xxx.xxx:8001'; //服务器IP:端口号
···
_updatePIData (reportId: any, trafficId: any, trafficPIData: any): Observable<any> {
// 设置请求参数
const params = new HttpParams()
.set('reportId', reportId)
.set('interfaceId', trafficId)
.set('tcs', JSON.stringify(trafficPIData)); // 数组转化为json再传
// 设置API
const url = `${this.EvaluationUrl}/updateTcsData/`;
return this.http.post<any>(url, httpOptions, {
params
}).pipe(
tap(data => this._log(`updatePIData`)),
catchError(this._handleError<any>('updatePIData'))
);
}
//工具函数,log打印,捕捉错误
private _log(message: string) {
console.log(message);
}
private _handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
this._log(`${operation} failed: ${error.message}`);
return of(result as T);
};
}
}
使用静态数据
-
创建文件
interface.ts
,导出静态数据,有多少,导多少。export const REPORTS = { status: 200, result: [{ date: '20181106', reportId: '561839db-e6ac-4a97-a942-0bb47990aae8', reportName: 'report3', activate: 'true' }, { date: '20181107', reportId: 'f7ab58b6-5251-45bd-9294-71451840b253', reportName: 'report8', activate: 'false' }] }; ··· export const REPORTDETAIL = { status: 200, result: { reportId: '561839db-e6ac-4a97-a942-0bb47990aae8', date: '20181118', reportName: 'report3', ··· };
-
在xxx.service.ts中导入
import { Observable, of } from 'rxjs'; ··· import { REPORTS, REPORTDETAIL, ···} from '../interface'; _updatePIData (reportId: any, trafficId: any, trafficPIData: any): Observable<any> { const params = new HttpParams() .set('reportId', reportId) .set('interfaceId', trafficId) .set('tcs', JSON.stringify(trafficPIData)); const url = `${this.EvaluationUrl}/updateTcsData/`; return of ({ status: 200, result: REPORTS }); }
在组件中调用服务并接收请求结果
在组件.component.ts
中导入服务模块,并注册
···
import { EvaluationService } from '../../evaluation.service';
···
export class PerFormanceIndicatorComponent implements OnInit{
constructor(
private _AI_E_Serve: EvaluationService,
···
) { }
···
someFunc(): void {
this._AI_E_Serve. _updatePIData(this.reportId, this.trafficId, this.tempPerformanceTableData)
.subscribe(data => {
if (data.status === 200) {
···
} else {
this.message.info('save failed.');
}
});
}