角--创建服务的正确方法是从服务器检索数据并将其发送给使用它的组件？
角--创建服务的正确方法是从服务器检索数据并将其发送给使用它的组件？
提问于 2018-10-12 09:00:51
我正在使用Angular开发一个web应用程序(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;
}
}这里请注意，我知道产品的数组是res.data。
现在，在我使用ProductService的组件中，我执行以下操作：
this.products = await this.productService.getProductsByCategory(ID);
正如我在问题开始时所说的那样，一切看起来都像预期的那样运转良好，但我对我读到的关于承诺和如何使用它们的所有文章感到困惑，所以我想问你们，这是正确的使用承诺的方式，还是我需要改进我的代码。
谢谢你的回应！
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-12 09:16:06
我将给出一个在我们的项目中使用的示例代码。
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)
});
}Stack Overflow用户
发布于 2018-10-12 09:06:42
我这里唯一的建议是不要使用承诺，因为可观察到的可以很容易地在代码中使用这些服务的地方使用。
Stack Overflow用户
发布于 2018-10-12 09:06:51
在我看来，您的HttpService可以转换为http拦截器。特别是如果您只使用一个API端点。
在ProductService中，我会返回一个可观察的，而不是一个承诺，主要原因有两个：
- 可观察的是可取消的。因此，一个请求可能需要更长的时间，并且用户会改变主意，您希望能够取消该请求，并让服务器停止处理它(如果这对服务器来说是一件很重要的事情)。
- 您的服务可能会演变为推送新的项目，当一些东西改变和承诺不能做到这一点。例如，您有一个具有
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?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52775944
复制相关文章
相似问题
腾讯云开发者
