Angular - Какой правильный способ создать службу, которая получает данные с сервера и отправляет их компоненту, который их использует? - PullRequest
Новая
       13

Angular - Какой правильный способ создать службу, которая получает данные с сервера и отправляет их компоненту, который их использует?

0 голосов
/ 12 октября 2018

Я занимаюсь разработкой веб-приложения с использованием Angular (v6.0.0).У меня есть сервер, который предоставляет API для извлечения продуктов.Все работает нормально, но мне интересно, правильно ли то, что я сделал и КАК я это сделал.Если нет, я задаюсь вопросом, может ли кто-нибудь помочь мне улучшить мой код.

Ниже приведен мой HttpService, который я использую как расширение HttpClient, потому что я должен установить используемый язык в URL-адресе запроса:

HttpService 

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { environment } from '../../../environments/environment';
import { TranslateService } from '@ngx-translate/core';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(
    private http: HttpClient,
    private translate: TranslateService
  ) { }

  /**
   * General GET request
   *
   * @param {string} url URL of the request
   * @param {HttpParams} [params]
   * @returns {Promise<any>}
   * @memberof HttpService
   */
  async get(url: string, params?: HttpParams): Promise<any> {
    return await this.http.get<any>(`${environment.apiURL}${this.translate.getDefaultLang()}/${url}`, { params: params }).toPromise();
  }
}

Тогда у меня есть ProductService : 

import { Injectable } from '@angular/core';
import { HttpService } from '../http/http.service';
import { Product } from 'src/app/models/product';
import { HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(
    private httpService: HttpService
  ) { }

  async getProductsByCategory(categoryId: string): Promise<Product[]> {
    let res = await this.httpService.get('products', new HttpParams().set('category', categoryId).set('perPage', '1000'));
    return res.data;
  }
}

Здесь обратите внимание, что я знаю, что продукты'array is res.data.

Теперь, в компоненте, где я использую ProductService, я делаю следующее:

this.products = await this.productService.getProductsByCategory(ID);

Как я сказал вВ начале вопроса все, кажется, работает нормально, как и ожидалось, но я путаюсь со всеми статьями, которые я прочитал об обещаниях и как их использовать, поэтому я хотел бы спросить вас, ребята, правильно ли этоспособ использовать обещания или если мне нужно улучшить мой код.

Спасибо за ваши ответы!

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

На мой взгляд, ваш HttpService может быть преобразован в http-перехватчик.Особенно, если у вас есть только одна конечная точка API, которую вы используете.

В ProductService я бы вернул наблюдаемую, а не обещание по двум основным причинам:

  1. Наблюдаемыеотменяемый.Так что, возможно, запрос занимает немного больше времени, и пользователь передумает, вы хотите иметь возможность отменить этот запрос, а сервер прекратить его обработку (если для сервера это довольно интенсивно).

  2. Ваш сервис может эволюционировать в продвижение новых товаров, когда что-то меняется и обещания не могут этого сделать.Например, у вас есть общая служба репо, которая имеет items$ и некоторые add / delete метод.Вы можете изменить службу, чтобы немедленно обновлять элементы, когда add / delete работает нормально, как в этом примере: Как добавить элемент в наблюдаемуютип из ответа API, если Observable обрабатывается асинхронным каналом?

0 голосов
/ 12 октября 2018

Я приведу пример кода, который используется в нашем проекте. 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs';
import { httpOptions } from '../../http-options';
import { Content } from '../../content.model';

@Injectable({
  providedIn: 'root'
})
export class PredefinedContentService {

  private reportPredefinedContentApi = `${environment.baseUrl}/report/report-predefined-contents`;

  constructor(private httpClient: HttpClient) { }

  getList(reportSectionId : number) : Observable<Content[]>{
    return this.httpClient.get<Content[]>(`${this.reportPredefinedContentApi}/${reportSectionId}`, httpOptions);
  }

}

В component.ts, 

reportSectionId: number;
contents: Content[] = [];

constructor(private predefinedTextService: PredefinedContentService) {}

getContentList() {
    this.predefinedTextService
      .getList(this.reportSectionId)
      .subscribe(result => {
        this.contents = result;
        },error => {
           console.log(error)
        });
}
0 голосов
/ 12 октября 2018

Мое единственное предложение здесь - не использовать Обещание , потому что Наблюдаемый может быть легко использован, когда вы используете эти сервисы в своем коде.

...