angular整理優化http請求

因為看到最近的服務請求有點亂，而且沒有固定且同一的報錯來源，所以整理所有請求中返回的訊息，提示信息及報錯信息

1.導入需要的http服務類

import { Injectable } from '@angular/core';
import { CookieService } from "ngx-cookie-service";
import { CanActivate, Router } from '@angular/router';

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

import { DataSourceService } from '../api/data-source.service';

import { RfqkeyService } from 'src/app/share/security/rfqkey.service';
import { UtilsService } from 'src/app/share/security/utils.service';
import { id_ID, NzMessageService } from 'ng-zorro-antd';
// import { showConfirm$ } from "../../components/confirm/confirm.component";
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class HttpService {
  ROOTURL: string;
  httpOptions: any;

  showConfirm$ = new Subject();

  constructor(private http: HttpClient, private CookieService: CookieService, private DataSourceService: DataSourceService,
    private router: Router,
    private RfqkeyService: RfqkeyService,
    private UtilsService: UtilsService,
    public message: NzMessageService,
  ) {
    this.ROOTURL = this.DataSourceService.getSpecificConfigure('datasources').api.host;
  }

 

}

2.整理請求，用於其他服務的請求，定義 好每一個請求的請求內容及類型

 get(url: string): any {
    var URL = this.ROOTURL + url;
    var res = this.judgeToken(URL, '', 'get');
    return res;
  }

  post(url: string, params: any): any {
    var URL = this.ROOTURL + url;
    var res = this.judgeToken(URL, params, 'post');
    return res;
  }

  put(url: string, params: any): any {
    var URL = this.ROOTURL + url;
    var res = this.judgeToken(URL, params, 'put');
    return res;
  }

  delete(url: string): any {
    var URL = this.ROOTURL + url;
    var res = this.judgeToken(URL, '', 'delete');
    return res;
  }

3.請求處理方法實現

/**
 *
 * @param {*} URL //服务器通讯地址及發送的參數
 * @param {*} params //post等請求傳遞的數據
 * @param {string} type //請求類型
 * @return {*} 
 * @memberof HttpService
 */

/**
 *
 *
 * @param {*} URL //服务器通讯地址及發送的參數
 * @param {*} params //post等請求傳遞的數據
 * @param {string} type //請求類型
 * @return {*} 
 * @memberof HttpService
 */
  async judgeToken(URL: any, params: any, type: string) {
    var res: any;
    var token = localStorage.getItem("rfqToken");
    if (!token) {
      token = '';
    }
    this.httpOptions = {
      headers: new HttpHeaders({
        // 'Content-Type':  'application/json',
        'Authorization': token
      })
    };

    if (type == 'get') {
      res = await this.http.get(URL, this.httpOptions).toPromise()
        .then(rs => rs)
        .catch((ex) => {
          const msg = this.getErrorMsg(ex);
          const code = this.getErrorCode(ex);
          const explanation = this.getErrorExplanation(ex);
          // this.message.create('error', msg);
          return {
            status: ex.status,
            result: {
              code: (code == '4000') ? code : 0,
              status: ex.status,
              msg: msg ? msg : '請求出錯',
              explanation: explanation,
            }
          };
        });
    }
    else if (type == 'post') {
      res = await this.http.post(URL, params, this.httpOptions).toPromise()
        .then(rs => rs)
        .catch((ex) => {
          const msg = this.getErrorMsg(ex);
          const code = this.getErrorCode(ex);
          const explanation = this.getErrorExplanation(ex);
          // this.message.create('error', msg);
          return {
            status: ex.status,
            result: {
              code: (code == '4000') ? code : 0,
              status: ex.status,
              msg: msg ? msg : '請求出錯',
              explanation: explanation,
            }
          };

        });
    } else if (type == 'delete') {
      res = await this.http.delete(URL, this.httpOptions).toPromise()
        .then(rs => rs)
        .catch((ex) => {
          const msg = this.getErrorMsg(ex);
          const code = this.getErrorCode(ex);
          const explanation = this.getErrorExplanation(ex);
          // this.message.create('error', msg);
          return {
            status: ex.status,
            result: {
              code: (code == '4000') ? code : 0,
              status: ex.status,
              msg: msg ? msg : '請求出錯',
              explanation: explanation,
            }
          };
        });
    } else if (type == 'put') {
      res = await this.http.put(URL, params, this.httpOptions).toPromise()
        .then(rs => rs)
        .catch((ex) => {
          const msg = this.getErrorMsg(ex);
          const code = this.getErrorCode(ex);
          const explanation = this.getErrorExplanation(ex);
          // this.message.create('error', msg);
          return {
            status: ex.status,
            result: {
              code: (code == '4000') ? code : 0,
              status: ex.status,
              msg: msg ? msg : '請求出錯',
              explanation: explanation,
            }
          };
        });
    }

    if (res.status == '403') {
      localStorage.removeItem("rfqToken");
      this.router.navigate(['/login']);
      return false;
    } else if (res.result) {
      if (res.result.secret) {
        res.result = JSON.parse(this.UtilsService.decrypt(res.result.secret, this.RfqkeyService.GetKey()));

        if (!res.result.code && res.result.msg && res.result.msg.showConfirm) {
          this.showConfirm$.next({
            title: '提示',
            content: res.result.msg.message,
          });
        }
      }
    }

    return res;
  }

 

4.異常處理方法實現，包括傳入的code值（判定為是否 成功返值），提示信息，報錯信息

 getErrorMsg(ex) {
    if (ex.hasOwnProperty('error')) {
      return this.getErrorMsg(ex.error);
    } else if (ex.hasOwnProperty('message')) {
      return ex.message;
    } else if (ex.hasOwnProperty('msg')) {
      return ex.msg;
    } else {
      return '';
    }
  }

  getErrorCode(ex) {
    if (ex.hasOwnProperty('error')) {
      return this.getErrorCode(ex.error);
    } else if (ex.hasOwnProperty('code')) {
      return ex.code;
    } else {
      return '';
    }
  }

  getErrorExplanation(ex) {
    if (ex.hasOwnProperty('error')) {
      return this.getErrorExplanation(ex.error);
    } else if (ex.hasOwnProperty('explanation')) {
      return ex.explanation;
    } else {
      return '';
    }
  }

用法：導入當前服務HttpService，傳遞需要的參數，得到的返回值進行處理

例： return this.HttpService.get('aaa?empno='+encodeURIComponent(params)+'&site='+params.site+'&plantid='+params.plantid);