我正在尝试与多个组件共享来自以下服务的 http 请求的结果。我遇到的问题是每个组件对 getMe() 函数的请求都会创建一个新的 http 调用。 MeService 服务仅在页面的根模块中声明为提供者,并在每个 *.component.ts 中导入,因此这不是由多次重新声明服务作为提供者的(常见)错误引起的在所有子组件中。正如您从输出中可以看出的那样,这很可能是由于调用的异步性质引起的,但如果我错了,请纠正我。
这是服务代码:
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class MeService {
private apiUrl = 'api/get/me';
private me: Object;
constructor(private http: Http) { }
getMe(): Promise<Object> {
console.log("OBSERVATION 1: " + this.me);
if (this.me) {
//Not sure if this is correct or not, I've never reached this block yet
return Promise.resolve(this.me)
} else {
return this.http.get(this.apiUrl)
.toPromise()
.then(response => {
console.log("OBSERVATION 2: " + this.me);
this.me = response.json();
console.log("OBSERVATION 3: " + this.me);
return this.me
})
.catch(this.handleError);
}
}
//Not relevant, just for completeness
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
控制台中的输出。请注意,[object Object] 填充了正确的数据,我已经检查了这一点,并为了清楚起见省略了 JSON.Stringify()。
OBSERVATION 1: undefined
OBSERVATION 1: undefined
OBSERVATION 2: undefined
OBSERVATION 3: [object Object]
OBSERVATION 2: [object Object]
OBSERVATION 3: [object Object]
我相信正在发生的事情是,Angular 组件在任何 http 调用返回之前加载,导致引导时出现多个请求。缓解这种情况的正确且最佳的方法是什么?
最佳答案
尝试返回请求本身并在组件内执行操作。你必须使用 promise 吗? Angular 更喜欢可观察值。
return this.http.get(this.apiUrl).map(res => res.json());
然后订阅您的每个组件。
关于angular - 缓解 Angular2 服务中的多个 http 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42631686/