首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角--创建服务的正确方法是从服务器检索数据并将其发送给使用它的组件?

角--创建服务的正确方法是从服务器检索数据并将其发送给使用它的组件?
EN

Stack Overflow用户
提问于 2018-10-12 09:00:51
回答 3查看 100关注 0票数 1

我正在使用Angular开发一个web应用程序(v6.0.0)。我有一个服务器,它公开API以检索产品。一切都很好,但我想知道我所做的和我是如何做的是正确的。如果没有,我想知道是否有人能帮我改进我的代码。

下面是我的HttpService,我使用它作为HttpClient的扩展,因为我必须在请求的URL中设置已使用的语言:

HttpService

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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;
  }
}

这里请注意,我知道产品的数组是res.data

现在,在我使用ProductService的组件中,我执行以下操作:

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

正如我在问题开始时所说的那样,一切看起来都像预期的那样运转良好,但我对我读到的关于承诺和如何使用它们的所有文章感到困惑,所以我想问你们,这是正确的使用承诺的方式,还是我需要改进我的代码。

谢谢你的回应!

EN

Stack Overflow用户

发布于 2018-10-12 09:06:51

在我看来,您的HttpService可以转换为http拦截器。特别是如果您只使用一个API端点。

ProductService中,我会返回一个可观察的,而不是一个承诺,主要原因有两个:

  1. 可观察的是可取消的。因此,一个请求可能需要更长的时间,并且用户会改变主意,您希望能够取消该请求,并让服务器停止处理它(如果这对服务器来说是一件很重要的事情)。
  2. 您的服务可能会演变为推送新的项目,当一些东西改变和承诺不能做到这一点。例如,您有一个具有items$和一些add/delete方法的通用回购服务。当add/delete运行良好时,您可以更改服务以立即更新项,如本例所示:How do I add an item to an Observable type from an API response, if the Observable is being handled by the async pipe?
票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52775944

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档