Question

在该课程中尝试以下课程https://www.pluralsight.com/courses/angular-2-getting-started和github材料product.service 每次单击链接时都要避免调用http.get（）请求。我认为每次加载文件都是一件很大的浪费，而不是将其保存为内存中的对象。

尝试替换此代码：

    getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

这一个：

    public _observable: Observable<IProduct[]>;

    getProducts(): Observable<IProduct[]> {
    console.log('_observable before: ' + (this._observable));
    if(this._observable===undefined){
        console.log('_observable inside 1: ' + (this._observable));
        this._observable=this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]> response.json())
            .do(data => console.log('All inside observable: ' +  JSON.stringify(data)))
            .catch(this.handleError);
        console.log('_observable inside 2: ' + (this._observable));
    }

    console.log('_observable after: ' + (this._observable));
    return this._observable;
}

如果this._observable未定义this._observable=this._http.get(this._productUrl)

，则永远不应调用此行

但是它被召唤!!!!

在Chrome控制台中：

_observable before: [object Object]
product.service.ts:25 _observable after: [object Object]
product.service.ts:20 All inside observable:...

不应出现最后一行！

Answer 1

_observable before是日志中的对象。并且＆＃34;最后一行＆＃34;评论在if-else之外。为什么不尝试：

    if (!Object.keys(this._observable).length) {
   console.log('_observable inside 1: ' + (this._observable));
    this._observable=this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All inside observable: ' +  JSON.stringify(data)))
        .catch(this.handleError);
        console.log('_observable inside 2: ' + (this._observable));
        return this._observable;
   } else {
        console.log('_observable after: ' + (this._observable));
        return this._observable;
   }

Answer 2

代码

var Checkbox7Value = this.getField("Checkbox7");
if (Checkbox7Value.isBoxChecked(239))
var Checkbox7Value = 239
else
var Checkbox7Value = 0

现在你不需要考虑那些条件。 publishReplay，refCount将在所有观察者之间共享相同的状态。因此，publishReplay将帮助您缓存数据，refCount将帮助观察者可用。

Answer 3

为避免文件被加载，您需要在if语句中包含代码行：

            .publishReplay(1)
            .refCount()

完整的代码在这里：

    getProducts(): Observable<IProduct[]> {
    console.log('_observable before: ' + (this._observable));
    if(this._observable===undefined){
        console.log('_observable inside 1: ' + (this._observable));
        this._observable=this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]> response.json())
            .publishReplay(1)
            .refCount()
            .do(data => console.log('All inside observable: ' +  JSON.stringify(data)))
            .catch(this.handleError);
        console.log('_observable inside 2: ' + (this._observable));
    }

    console.log('_observable after: ' + (this._observable));
    return this._observable;
}

如何缓存和共享Http get（）响应？

3 个答案: