缓解Angular2服务中的多个http请求

我正在尝试与多个组件共享来自以下服务的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);

    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Headers，Http}；
导入“rxjs/add/operator/toPromise”；
@可注射（）
导出类服务{
私有apiUrl='api/get/me'；
私人我：对象；
构造函数（私有http:http）{}
承诺{
console.log（“观察1:+this.me”）；
如果（这个.我）{
//不确定这是否正确，我还没有到达这个街区
回报承诺。解决（这个。我）
}否则{
返回this.http.get（this.apirl）
.toPromise（）
。然后（响应=>{
console.log（“观察2:+this.me”）；
this.me=response.json（）；
console.log（“观察3:+this.me”）；
把这个还给我
})
.接住（这个.把手错误）；
}
}
//不相关，只是为了完整性
私有句柄错误（错误：任意）：承诺{
console.error（'发生错误'，error）；//仅用于演示目的
返回承诺。拒绝（error.message | | error）；
}
}

控制台中的输出。请注意，[object]中填充了正确的数据，为了清楚起见，我已经检查了这一点，并省略了JSON.Stringify（）

意见1：未定义

意见1：未定义

意见2：未定义

意见3:[对象]

观察2:[对象]

意见3:[对象]

---

我认为正在发生的是，Angular组件在任何http调用返回之前加载，从而在引导时导致多个请求。缓解这种情况的正确和最佳方法是什么？

尝试返回请求本身并在组件内部执行操作。你必须使用承诺吗？角度更喜欢观察

return this.http.get(this.apiUrl).map(res => res.json());

---

然后订阅您的每个组件。

多亏了chrispy的提示，我深入到了observates中，似乎它们确实是实现异步http调用的首选方法。然而，仅仅从组件内部订阅并不能阻止服务对API的多次调用，直到找到API，我才让它工作。我不确定这是否是一个最佳实践，但它确实有效。

将此标记为正确答案，因为它引导我实现了以下工作：