简易版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再传// 设置APIconst 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 insteadthis._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中导入
  Observable, 一个多值生成器，这些值会被推送给订阅者。 通过调用可观察对象的 subscribe() 方法来订阅它，Angular 使用RxJS来实现这些功能，所以要导入这个包。下一步就会使用subscribe() 。

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