gpt4 book ai didi

http - Angular 2 - 可观察和异步 http 加载

转载 作者:可可西里 更新时间:2023-11-01 17:00:51 25 4
gpt4 key购买 nike

这些天我一直在与 angular2 作斗争,目前我遇到了一些与异步 http 加载相关的问题。

这是我得到的:

  • 1 个服务组件 (MyCustomHttpService),包含对 REST API 执行 http 调用的方法
  • 1 个类 (DataProvider),其属性必须用检索到的数据填充
  • 1 个 View 组件 (MyCmp),它调用类的 getter 以将数据推送到 View

我想做什么:

当我调用 "DataProvider.getDataProviderSpecification()"

  • 如果数据还没有加载,我就加载它
  • 否则,我返回已经加载的数据

此逻辑必须在 DataProvider 类中,而不是在自定义 http 服务或 View 组件中。

我找到了一个真正肮脏的解决方法。因为我知道它真的很糟糕,所以我正在寻求有关如何改进那段代码的建议。

预先感谢您的帮助。

看起来像这样(代码已清理):

/** CLASS **/
@Component()
export class DataProvider {
private treestructure: any = null;

constructor(private httpService: MyCustomHttpService) {}

public getDataProviderSpecification() {
if(this.treestructure == null) {
return Observable.create(observer => {
// http service to get REST data
this.httpService.getDocumentDataProviderTree(this.documentID)
.subscribe((tree)=> {
this.treestructure= tree;
observer.next(this.treestructure);
observer.complete();
});
});
} else {
return Observable.create(observer => {
observer.next(this.treestructure);
observer.complete();
});
}
}
...
}


/** VIEW COMPONENT **/
@Component({
selector: 'my-cmp',
template: '<tree-cmp [structure]="tree"></tree-cmp>',
inputs: ['dataprovider'],
directives: [TreeComponent]
})
export class MyCmp {
@Input() dataprovider: DataProvider;
tree: any;
showDetails(id) {
this.dataprovider.getDataProviderSpecification().subscribe((treestructure) => {
this.tree = treestructure;
});
}
}

最佳答案

这应该做你想做的:

public getDataProviderSpecification() {
if(this.treestructure) {
return Observable.of(this.treestructure);
else if(this.observable) {
// if `this.observable` is set then the request is in progress
// return the `Observable` for the ongoing request
return this.observable;
} else {
// create the request, store the `Observable` for subsequent subscribers
this.observable = this.httpService.getDocumentDataProviderTree(this.documentID)
//.map(res => res.json())
.do(val => {
this.treestructure = val;
// when the cached data is available we don't need the `Observable` reference anymore
this.observable = null;
})
// make it shared so more than one subscriber can get the result
.share();
return this.observable;
}
}

另见 https://stackoverflow.com/a/36291681/217408

关于http - Angular 2 - 可观察和异步 http 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36993089/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com