ng-cli 中HTTP请求思路（1） （接口请求处理）

一、创建api.ts:

import { environment } from '../../environments/environment';

export const API = {

  // 获取城市下拉框
  cityList: 'commonConfData/cityList',
  // 添加同比、环比
  dayonday: environment.baseURL1 + 'v1.0/statistics/dayonday',

}

//environment.ts:

//export const environment = {
 // production: false,
 //envName: 'dev',
 // baseURL: 'http://192.168.108.24:31519/',
 // baseURL1: 'http://192.168.16.100:29911/',
 // baseURL: 'http://192.168.20.210:8003/',
 // baseURL: 'http://192.168.16.100:29903/',
 // loginURL: 'http://192.168.108.3:32678/',
 // hmr: false
//};

二、创建data.service.ts:

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { API } from '../api';
import { Observable } from 'rxjs';
import { HandleError, HttpErrorHandlerService } from './http-error-handler.service';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class DataService {
  handleError: HandleError;

  constructor(
    private http: HttpService,
    private httpErrorHandler: HttpErrorHandlerService
  ) {
    this.handleError = this.httpErrorHandler.createErrorHandler('DataService');
  }

  /**
   * 公共接口
   */

  getCityList(params): Observable<any> {
    return this.http.Get(API.cityList, params, {
      msg: '城市下拉框',
      data: {}
    }).pipe(map(res => res.data));
   }

  deleteHighwayDel(params): Observable<any> {
    return this.http.Delete(API.highwayDel, params,{
      msg: '删除',
      data: {}
    }, true, '', true).pipe(map(res => res['code']));
  }
  getAddHighway(params): Observable<any> {
    return this.http.Post(API.addHighway, params, 1, {
      msg: '新增高速',
      data: {}
    }, true, '', true).pipe(map(res => res['status']));
  }
 }

三、this.http.Get()/Post()/Delete() 函数 ，在http.service.ts文件中处理，次文件整理完成后再发布

四、xxx.ts组件中直接调用:

  // 路线删除 Delete请求
  deleteSiteClick(id) {
    this.dataService.deleteStationDel({
      stationId: id
    }).subscribe(data => {
      // 200请求成功
      if (data === 200) {
        this.getStationInfoList();
      }
    });
  }

  // 详情按钮  get请求
  showModal(id): void {
    this.isVisible = true;
    this.dataService.getStationInfo({
      stationId: id,
    }).subscribe(data => {
      this.siteInfo = data;
    });
  }

  /**
  * 确认按钮  Post请求
  */
  handleOk() {
      this.dataService.getAddHighway(this.reParamList).subscribe(status => {
        if (status === 200) {
          setTimeout(() => {
            // this.message.error("编辑成功");
            this.router.navigateByUrl('main/road-list');
          }, 500);
        } else {
          // this.message.error('接口请求错误');
        }
      });
  }