如何创建发出动态请求的http observable [英] How to create an http observable that makes dynamic requests

问题描述

我有一个观察对象，它可以发出动态请求.

I have an observable that makes dynamic requests.

例如，

getFlowers(params?: any): Obeservable<Flower[]> {
  return this.http.get<Flower[]>(
    `http://flowers.com/flowers`, { params }
  )
}

现在，上面的函数在每个函数调用中都返回新的http.我想以某种方式实现返回相同的可观察实例(尽管进行了不同的http调用)，以便可以使用switchMap取消先前的同时请求.

Now, the above function returns new http observable each function call. I would like to somehow achieve returning the same observable instance (despite making different http calls) such that I can use switchMap to cancel previous simultaneous requests.

我有一个想法，我应该创建一个Observable属性(单例)，但是我没有意识到如何利用它.

I have an idea that I should create an Observable property (singleton), but I fail to realize how to utilize it.

推荐答案

现在，上面的函数会在每个函数调用中返回新的http可见的??

Now, the above function returns new http observable each function call??

这实际上是HTTP可观察对象的正常行为，因为它们是冷的. 当感冒observable具有多个subscribers时，将为每个subscriber重新发射整个数据流.每个订户都变得独立，并获得自己的数据流
方法:1
为避免HTTP请求重复，您可以使用 shareReplay 运算符.

This is actually the normal behavior of the HTTP observables as they are Cold. When a cold observable has multiple subscribers, the whole data stream is re-emitted for each subscriber. Each subscriber becomes independent and gets its own stream of data
Approach:1
To Avoid Duplication of HTTP Requests you can use shareReplay operator.

import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { shareReplay, tap } from "rxjs/operators";
@Injectable()
export class ShareService {
  public response$: Observable<any>;
  constructor(private httpc: HttpClient) {
    this.sendRequest();
  }
  public sendRequest() {
    this.response$ = this.httpc.get("url").pipe(
      tap(res => {
        console.log("called");
        return res;
      }),
      shareReplay(1)
    );
  }
  fetchData() {
    return this.response$;
  }
}

component1:

constructor(service: ShareService) {
    service.fetchData().subscribe(result => {
      console.log(result);
    });
  }

component2:

   constructor(service: ShareService) {
    service.fetchData().subscribe(result => {
      console.log(result);
    });
  }

Further Reading

Live Demo
方法:2
如果您的目标是多播数据，请使用RXJS的Subject或BehaviorSubject
Subject充当源Observable与许多observers之间的桥梁/代理，从而使多个observers可以共享相同的Observable执行.
推荐的这种公开主题的方式是使用asObservable()运算符.

Further Reading

Live Demo
Approach:2
If your objective is to multicast the data use RXJS's Subject or BehaviorSubject
Subject acts as a bridge/proxy between the source Observable and many observers, making it possible for multiple observers to share the same Observable execution.
This recommended way of exposing Subjects are using the asObservable() operator.

@Injectable()
export class MyProvider {
  private myObservable=new Subject<any>();
  CurrentData = this.myObservable.asObservable();
  constructor(private aFs: AngularFirestore) {
    //your logic
      this.myObservable.next(value);//push data into observable
  }


}

Page.ts

this.mySubscription = this.myProvider.CurrentData.subscribe(value => {
      //something that works
    });

使用行为主题

@Injectable()
export class MyProvider {
  private myObservable = new BehaviorSubject<any>("");
  CurrentData = this.myObservable.asObservable();
  constructor(private aFs: AngularFirestore) {}

  getData(myParam): void {
    someasynccall
      .pipe(
        map(),
        filter()
      )
      .subscribe(value => this.myObservable.next(value));
  }
}

Page.ts

this.myProvider.getData(param);
this.mySubscription = this.myProvider.CurrentData.subscribe(value => {
      //something that works
    });

Subject vs BehaviorSubject >

LiveDemo

这篇关于如何创建发出动态请求的http observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！