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

Question

我正在尝试与多个组件共享来自以下服务的 HTTP 请求的结果。我遇到的问题是每个组件对 getMe() 函数的请求都会创建一个新的 http 调用。 MeService服务只在页面的根模块中声明为provider，并在每个*.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 调用返回之前加载，导致引导时出现多个请求。缓解这种情况的正确和最佳方法是什么？

Answer 1

尝试返回请求本身并在您的组件内执行操作。你必须使用承诺吗？ Angular 更喜欢 observables。

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

然后订阅您的每个组件。

Answer 2

感谢 chrispy 的提示，我深入研究了 Observables，看来它们确实是实现异步 http 调用的首选方式。但是，仅仅从组件内部订阅并不能阻止从服务多次调用 API，直到我找到 this answer，我才让它开始工作。我不确定这是否是最佳做法，但它确实有效。

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

Mitigate multiple http request in Angular2 Service

angular-http

angular-services

angular