Создание обертки сервиса Common Http в angular 6 - это хорошо или нет - PullRequest
1 голос
/ 06 октября 2019

Я создал общую оболочку службы http и добавляю ее в каждый компонент. Я немного запутался в том, что

лучше ли внедрять службу HttpClient в каждый компонент или создавать оболочку службы http, как я ее создал?

Или мы можем сделать и то и другое?

Пожалуйста, дайте несколько советов по этому вопросу. Это будет очень полезно.

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../../../environments/environment';
import { LoaderService } from './loader.service';
import { FormUtils } from '../utils/form.utils';

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  private apiUrl: string;

  constructor(private http: HttpClient, private _loaderService: LoaderService) {
    this.apiUrl = environment.url;
  }

  post<T>(url, data, loader = true): Observable<Common.ApiResponse<T>> {
    if (loader) {
      this._loaderService.loader.next(loader);
    }
    return this.http.post<Common.ApiResponse<T>>(this.apiUrl + url, data);
  }

  put<T>(url, data, loader = true): Observable<Common.ApiResponse<T>> {
    if (loader) {
      this._loaderService.loader.next(loader);
    }
    return this.http.put<Common.ApiResponse<T>>(this.apiUrl + url, data);
  }

  patch<T>(url, data, loader = true): Observable<Common.ApiResponse<T>> {
    if (loader) {
      this._loaderService.loader.next(loader);
    }
    return this.http.patch<Common.ApiResponse<T>>(this.apiUrl + url, data);
  }

  get<T>(
    url,
    httpParams?: any,
    loader = true
  ): Observable<Common.ApiResponse<T>> {
    const updatedParams = this.parseDateToTimeStamp(httpParams);
    console.log(updatedParams, '--------------');

    if (loader) {
      this._loaderService.loader.next(loader);
    }
    for (let item in httpParams) {
      if (
        httpParams[item] === '' ||
        httpParams[item] === undefined ||
        httpParams[item] === null
      ) {
        delete httpParams[item];
      }
    }
    const header = {};
    if (httpParams) {
      header['params'] = updatedParams;
    }
    return this.http.get<Common.ApiResponse<T>>(this.apiUrl + url, header);
  }

  parseDateToTimeStamp(obj: any) {
    const newValueInstance = Object.assign({}, obj);
    (function isEmpty(data: any): boolean {
      if (typeof data === 'object' && data !== null) {
        if (Array.isArray(data)) {
          data.forEach((item: any, index: number) => {
            if (isEmpty(item)) {
              data.splice(index, 1);
            }
          });
        } else {
          Object.keys(data).map((key, index) => {
            console.log(data[key] instanceof Date);
            if (data[key] instanceof Date) {
              data[key] = new Date(data[key]).getTime();
            }
          });
        }
      }
      return data;
    })(newValueInstance);
    return newValueInstance;
  }
}

1 Ответ

0 голосов
/ 06 октября 2019

Я бы не советовал делать это , если вы не знаете, что делаете ...

Кроме того, если вы создаете этот сервис-обертку просто для сервиса-загрузчика. Попробуйте вместо этого использовать угловой перехватчик. Перехватчик обнаружит запрос http и отобразит ваш загрузчик. Прочитайте эту среднюю статью / руководство: Панель загрузчика при каждом HTTP-запросе на угловом языке 6

В настоящее время ваша «оболочка» допускает только URL-ссылку, HttpParams, body и переменную загрузчикабыть переданы в качестве аргументов. Вы начнете сталкиваться с проблемами, когда вам нужно будет интегрировать другие конечные точки API, для которых требуется указать конкретный HttpHeaders или иметь другой responseType, такой как «текст». В конечном итоге вам придется снова и снова изменять службу оболочки и тратить много времени просто на сохранение нескольких строк кода.

Или вы можете просто попытаться сделатьпросто получить запрос без желания звонить parseDateToTimeStamp(). Вы не можете сделать это с помощью службы оболочки .

Или, что если вы захотите сделать запрос HEAD, то в конечном итоге вам придется изменить службу оболочки или использовать комбинацию службы оболочки и оригинальный пакет HttpClient в вашем приложении, который, я думаю, просто пахнет кодом.

Вам лучше просто использовать пакет HttpClient как есть.

Вместо этого вы можете создатьновый файл .ts, возможно, назовите его DateTimeHelper.ts или чем-то другим и экспортируйте в него parseDateToTimeStamp() следующим образом:

export function parseDateToTimeStamp(){}

Затем импортируйте эту функцию в любые сервисные функциичто вам нужно использовать.

При этом вам нужно будет абстрагировать следующую часть вашего кода также в отдельную функцию (что-то вроде этого):

export function updateMyParams(httpParams: HttpParams){ //or some identifier that you prefer
    const updatedParams = this.parseDateToTimeStamp(httpParams);
    console.log(updatedParams, '--------------');

    if (loader) {
      this._loaderService.loader.next(loader);
    }
    for (let item in httpParams) {
      if (
        httpParams[item] === '' ||
        httpParams[item] === undefined ||
        httpParams[item] === null
      ) {
        delete httpParams[item];
      }
    }
    const header = {};
    if (httpParams) {
      header['params'] = updatedParams;
    }
}

You 'Только после этого придется повторно импортировать эти 2 функции для служб, которые вам необходимы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...