Angular2:减少 Http 调用次数
Angular2 : Reduce number of Http calls
我将 Angular2 RC5 与 ASP.NET 核心服务器一起使用,该服务器会调用 API 来获取我的数据。
我实际上想知道是否有一种方法可以减少您使用 Angular2 进行的 http 调用次数,因为我担心如果我继续按照我的方式使用组件,将会有很多。这是一个具体的例子。
我想从数据库中获取一个文本值,它由一个 ID 和一种语言定义。然后我制作了以下组件:
dico.component.ts
@Component({
selector: 'dico',
template: `{{text}}`,
providers: [EntitiesService]
})
class Dico implements AfterViewInit {
@Input() private id: string;
@Input() private lang: string;
private text: string = null;
// DI for my service
constructor(private entitiesService: EntitiesService) {
}
ngAfterViewInit() {
this.getDico();
}
// Call the service that makes the http call to my ASP Controller
getDico() {
this.entitiesService.getDico(this.id, this.lang)
.subscribe(
DicoText => this.text = DicoText
);
}
}
@Component({
template: `<dico [id] [lang]></dico>`,
directives: [Dico]
})
export class DicoComponent {
}
这是我的服务代码:
entities.service.ts
getDico(aDicoID: string, aLangue: string) {
// Parameters to use in my controller
let params = new URLSearchParams();
params.set("aDicoID", aDicoID);
params.set("aLangue", aLangue);
// Setting up the Http request
let lHttpRequestBody = params.toString();
let lControllerAction: string = "/libelle";
let lControllerFullURL: string = this.controllerURL + lControllerAction;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.post(lControllerFullURL, lHttpRequestBody, options)
.map((res: any) => {
// Parsing the data from the response
let data = res.json();
// Managing the error cases
switch (data.status) {
case "success":
let l_cRet: string = data.results;
if (l_cRet != null && !l_cRet.includes("UNDEFINED")) {
return data.results;
} else {
throw new Error("Erreur récupération Dico : " + l_cRet);
}
case "error":
throw new Error("Erreur récupération Dico : " + data.message);
}
}
).catch(this.handleError);
}
然后我就可以在我的应用程序中使用我新制作的组件了:
randomFile.html
<dico id="201124" lang="it"></dico>
<dico id="201125" lang="en"></dico>
<dico id="201126" lang="fr"></dico>
但此应用程序最终将使用数百个 "dico",我想知道如何在应用程序完全加载之前管理一些预取或类似的东西。这有关系吗?从长远来看,这会影响性能吗?
如有任何建议,我们将不胜感激。
EDIT :这些 dico 允许我从数据库中获取翻译成我想要的语言的文本。在上面的示例中,我有 3 个 "dico" 将输出一些意大利语、法语和英语文本。
我的应用程序将使用很多它们,因为每个菜单中的每个文本都是一个 "dico",问题是它们会有很多,现在我制作的每个 "dico",我的服务被调用并进行一次 http 调用以获取数据。我想要的是以某种方式定义我所有的 dicos,调用服务,它将给我所有 dicos 的文本,以避免进行多次调用(但我真的不知道该怎么做)。
一个基本的未经测试的方法(我自己也不太了解 observables)
class DicoService {
private subjects = {}
private ids = [];
getDico(String id):Observable<Dico> {
var s = this.subjects[id];
if(!s) {
this.ids.push(id);
s = new Subject();
this.subjects[id]=s;
}
return s.asObservable().share().first();
}
sendRequest() {
http.get(....) /* pass this.ids */
map(response => response.json())
.subscribe(data => {
for(item in data) { // don't know how to iterate exactly because I don't know how the response will look like
this.subject[item.id].next(item.langText);
}
// you might cache them if other components added by the router also request them
// this.subjects = {};
// this.ids = []
});
}
}
<dico [text]="dicoService.getDico('someId') | async"></dico>
ngAfterViewInit() {
this.dicoService.sendRequest();
}
我将 Angular2 RC5 与 ASP.NET 核心服务器一起使用,该服务器会调用 API 来获取我的数据。 我实际上想知道是否有一种方法可以减少您使用 Angular2 进行的 http 调用次数,因为我担心如果我继续按照我的方式使用组件,将会有很多。这是一个具体的例子。
我想从数据库中获取一个文本值,它由一个 ID 和一种语言定义。然后我制作了以下组件:
dico.component.ts
@Component({
selector: 'dico',
template: `{{text}}`,
providers: [EntitiesService]
})
class Dico implements AfterViewInit {
@Input() private id: string;
@Input() private lang: string;
private text: string = null;
// DI for my service
constructor(private entitiesService: EntitiesService) {
}
ngAfterViewInit() {
this.getDico();
}
// Call the service that makes the http call to my ASP Controller
getDico() {
this.entitiesService.getDico(this.id, this.lang)
.subscribe(
DicoText => this.text = DicoText
);
}
}
@Component({
template: `<dico [id] [lang]></dico>`,
directives: [Dico]
})
export class DicoComponent {
}
这是我的服务代码:
entities.service.ts
getDico(aDicoID: string, aLangue: string) {
// Parameters to use in my controller
let params = new URLSearchParams();
params.set("aDicoID", aDicoID);
params.set("aLangue", aLangue);
// Setting up the Http request
let lHttpRequestBody = params.toString();
let lControllerAction: string = "/libelle";
let lControllerFullURL: string = this.controllerURL + lControllerAction;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.post(lControllerFullURL, lHttpRequestBody, options)
.map((res: any) => {
// Parsing the data from the response
let data = res.json();
// Managing the error cases
switch (data.status) {
case "success":
let l_cRet: string = data.results;
if (l_cRet != null && !l_cRet.includes("UNDEFINED")) {
return data.results;
} else {
throw new Error("Erreur récupération Dico : " + l_cRet);
}
case "error":
throw new Error("Erreur récupération Dico : " + data.message);
}
}
).catch(this.handleError);
}
然后我就可以在我的应用程序中使用我新制作的组件了:
randomFile.html
<dico id="201124" lang="it"></dico>
<dico id="201125" lang="en"></dico>
<dico id="201126" lang="fr"></dico>
但此应用程序最终将使用数百个 "dico",我想知道如何在应用程序完全加载之前管理一些预取或类似的东西。这有关系吗?从长远来看,这会影响性能吗?
如有任何建议,我们将不胜感激。
EDIT :这些 dico 允许我从数据库中获取翻译成我想要的语言的文本。在上面的示例中,我有 3 个 "dico" 将输出一些意大利语、法语和英语文本。 我的应用程序将使用很多它们,因为每个菜单中的每个文本都是一个 "dico",问题是它们会有很多,现在我制作的每个 "dico",我的服务被调用并进行一次 http 调用以获取数据。我想要的是以某种方式定义我所有的 dicos,调用服务,它将给我所有 dicos 的文本,以避免进行多次调用(但我真的不知道该怎么做)。
一个基本的未经测试的方法(我自己也不太了解 observables)
class DicoService {
private subjects = {}
private ids = [];
getDico(String id):Observable<Dico> {
var s = this.subjects[id];
if(!s) {
this.ids.push(id);
s = new Subject();
this.subjects[id]=s;
}
return s.asObservable().share().first();
}
sendRequest() {
http.get(....) /* pass this.ids */
map(response => response.json())
.subscribe(data => {
for(item in data) { // don't know how to iterate exactly because I don't know how the response will look like
this.subject[item.id].next(item.langText);
}
// you might cache them if other components added by the router also request them
// this.subjects = {};
// this.ids = []
});
}
}
<dico [text]="dicoService.getDico('someId') | async"></dico>
ngAfterViewInit() {
this.dicoService.sendRequest();
}