在Angular2 Service

时间:2017-03-06 17:17:43

标签: angular angular-services angular-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);

    }
}

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

  

观察1:未定义

     

观察1:未定义

     

观察2:未定义

     

观察3:[对象对象]

     

观察2:[对象]

     

观察3:[对象对象]

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

2 个答案:

答案 0 :(得分:2)

尝试返回请求本身并在组件内执行操作。你必须使用承诺吗? Angular更喜欢可观察物。

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

然后订阅每个组件。

答案 1 :(得分:0)

由于来自chrispy的提示,我潜入了Observables,看起来它们确实是实现异步http调用的首选方式。但是,仅仅从组件内部订阅并不会阻止从服务到API的多次调用,在找到this answer之前我没有让它工作。我不确定这是否是最佳做法,但它确实有效。