AngularJS 2/4 中 BehaviourSubject 中的 HTTP 响应缓存和下一步

Posted 2023-03-16

【中文标题】AngularJS 2/4 中 BehaviourSubject 中的 HTTP 响应缓存和下一步

【英文标题】：HTTP response caching and nexting in BehaviourSubject in AngularJS 2/4

【发布时间】：2018-03-15 12:13:32

【问题描述】：

我有 2 个同级组件具有一个服务，该服务具有 HTTP 调用来呈现 json。 OnInit，组件 B 获取调用服务的 HTTP 响应并加载屏幕。 组件 A 上的点击事件，应该使组件 B 刷新其数据。

我按照 ObjectiveTC 发布的答案来自 -> What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

    _docdata: BehaviorSubject<DetailSection[]> = new BehaviorSubject<DetailSection[]>([]);

service.getData()return  this.http.get(this.url)
        .map((res) =>this._docdata = (res.json()); console.log("1st return"); return this._docdata; )     
        .catch((error:any) => Observable.throw(error|| 'Server error'));  

这很好用。

refresh()
this.http.get("../../assets/reqd-detail.json")
        .map(res => res.json())
        .subscribe((data:Array<DetailSection>) => this._docdata.next(data));

出现错误 --> ERROR TypeError: _this._docdata.next is not a 功能 在 SafeSubscriber._next (detail.service.ts:156) 在 SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (订阅者.js:238) 在 SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next （订阅者.js:185） 在 Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next （订阅者.js:125） 在 Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (

【参考方案1】：

问题在于您的地图函数内部，您将 _docData 覆盖到响应对象（即数组类型），而不是可观察的。而且那上面没有下一个功能。

试试这个

_docdata: BehaviorSubject<DetailSection[]>;

service.getData()return  this.http.get(this.url)
        .map((res) =>
             let detailSections = res.json();
             this._docdata = new BehaviorSubject<DetailSection[]>(detailSections); 
             console.log("1st return"); 
             return detailSections; )     
            .catch((error:any) => Observable.throw(error|| 'Server error'));  

【讨论】：

感谢您的回复。但是我在 refresh() 方法中遇到 _docdata.next() 错误 Error => ERROR TypeError: _this._docdata.next is not a function

是的，您在刷新时遇到错误的原因是因为在 getData 中您使用不使用 BehaviourSubject 的对象初始化了 _docData。上面的代码你试过了吗？

现在 refresh() 工作正常。但是 getData() 没有呈现响应。 refresh () return this.http.get("../../assets/reqd-detail.json") .map(res => res.json()) .subscribe((data:DetailSection[]) = > this._docdata.next(data);console.log(this._docdata), (err: any) => console.error("fetch: ERROR",err), () => console.log("获取：总是“））；

你是直接使用getData还是通过_docData？

它应该返回值，因为我们除了将它分配给 _docData 之外，还返回来自 get 的任何响应。您是否复制了整个代码，特别是最后一行 return detailSections？

【参考方案2】：

下面的代码对我来说很好。

主题变量

_docdata: BehaviorSubject = new BehaviorSubject([]); docdata: Observable = this._docdata.asObservable();

getData() / refresh() return this.http.get(this.url) .map(res => res.json()) .subscribe((data:DetailSection[]) => this._docdata.next(data);console.log(this._docdata), (err: any) => console.error("fetch: ERROR",err), () => console.log("fetch: always"));

在组件中获取响应为：

this.detailService.getPageData(key,srcFrom); this.detailService.docdata.subscribe((dataList) => this.dataList = dataList;console.log("dataList from component",this.dataList););