rxjs publishReplay 与 windowTime 参数重置 [英] rxjs publishReplay with windowTime parameter reseting

问题描述

我正在尝试限制订阅在 rxjs 中缓存的时间.以前缓存是通过 pipe(publishReplay(1), refCount()) 完成的.找到这个不错的

解决方案

经过 3 小时的调试，我找到了以下答案:https://stackoverflow.com/a/54957061

我所要做的就是在最后添加一个 take(1).

新示例:

 testX = this.http.get(this.urlofApi).pipe(tap(() => console.log(被调用的"))，发布重播(1, 5),refCount(),拿(1));

StackBlitz:https://stackblitz.com/edit/angular-ivy-tyrbdw?file=src%2Fapp%2Fapp.component.ts

完整示例:

import { Component, VERSION } from "@angular/core";从rxjs/operators"导入{publishReplay, refCount, take, tap };从@angular/common/http"导入{HttpClient}；@成分({选择器:我的应用程序"，templateUrl: "./app.component.html",styleUrls: [./app.component.css"]})导出类 AppComponent {名称=角度"+ VERSION.major;urlofApi = "https://api.github.com/search/repositories?q=helloWorld";testX = this.http.get(this.urlofApi).pipe(点击(() =>控制台.日志(`++ api 在 ${new Date().toLocaleTimeString()} ++` 处被新调用)),发布重播(1, 5000),refCount(),拿(1));构造函数(私有 http:HttpClient){}测试() {console.log(从 API 请求数据");this.testX.pipe(take(1)).subscribe(() => console.log(已完成"));}}

I'm trying to limit the time subscriptions are cached in rxjs. Previously the caching was done with pipe(publishReplay(1), refCount()). After finding this nice answer and reading the docs, I found out that this cache time can be limited by passing a second parameter to publishReplay. Example: publishReplay(1, 60 * 1000)

I tried to make a minimal example:

<button (click)="test()">Test</button>

JS:

  urlofApi = "https://api.github.com/search/repositories?q=helloWorld";

  testX = this.http.get(this.urlofApi).pipe(
    tap(() => console.log("called")),
    publishReplay(1, 5),
    refCount()
  );

  constructor(private http: HttpClient) {}

  test() {
    const x = this.testX.subscribe();
  }

See: https://stackblitz.com/edit/angular-ivy-z7ecyn?file=src%2Fapp%2Fapp.component.ts

However the reslt is not discareded after 5ms, but held indefinitly. What am I missing?

解决方案

After 3 Hours of debugging, I found the following answer: https://stackoverflow.com/a/54957061

All I had to do, was add a take(1) at the end.

New example:

  testX = this.http.get(this.urlofApi).pipe(
    tap(() => console.log("called")),
    publishReplay(1, 5),
    refCount(),
    take(1)
  );

StackBlitz: https://stackblitz.com/edit/angular-ivy-tyrbdw?file=src%2Fapp%2Fapp.component.ts

Full example:

import { Component, VERSION } from "@angular/core";
import { publishReplay, refCount, take, tap } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  urlofApi = "https://api.github.com/search/repositories?q=helloWorld";

  testX = this.http.get(this.urlofApi).pipe(
    tap(() =>
      console.log(
        `++ api was newly called at ${new Date().toLocaleTimeString()} ++`
      )
    ),
    publishReplay(1, 5000),
    refCount(),
    take(1)
  );

  constructor(private http: HttpClient) {}

  test() {
    console.log("Requesting data from API");
    this.testX.pipe(take(1)).subscribe(() => console.log("completed"));
  }
}

这篇关于rxjs publishReplay 与 windowTime 参数重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！