多次订阅可观察的 rxjs答案

【问题标题】：Subscribing multiple times to an observable rxjs多次订阅可观察的 rxjs
【发布时间】：2017-04-13 07:05:36
【问题描述】：

我正在努力实现以下目标：

我有一个可以订阅多次的 Observable，虽然我只想处理一次。

export class DataLoader
{
    private loaded = false;
    private data: Data;
    private observable = null;

    load(): Observable<Data> {
        if(this.loaded) {
            console.log('Already loaded');
            return Observable.create((obs) => {
                obs.next(this.data);
                obs.complete();
            })
        }

        if(this.observable === null) {
            console.log('Creating observable');
            this.observable = Observable.create((obs) => {

                console.log('firing xhr');
                let xhr;

                xhr.onload = () => {
                    this.data = data;
                    this.loaded = true;
                    obs.next(data);
                    obs.complete();
                    this.observable = null;
                }

                xhr.onerror = () => {
                    obs.error(error);
                    this.observable = null;
                }
            });
        }

        return this.observable;
    }
}

假设我在 2 个不同的地方使用这个 DataLoader，'xhr' 只会执行一次。

...
Dataloader.load().subscribe();
...
#At another point in the code
Dataloader.load().subscribe();
...

控制台：

Creating observable
firing xhr
Already Loaded

只要请求彼此之间没有过快地触发，此方法就可以正常工作。

为了演示，让我们把它放在一个 for 循环中：

for(let i = 0; i<10; i++) {
    DataLoader.load().subscribe();
}

在这种情况下，控制台如下所示：

Creating observable
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr
firing xhr

我怎样才能设法在 for 循环中使用它？我一直在研究一个主题/行为主题，但我似乎无法让它发挥作用。

【问题讨论】：

标签： javascript rxjs observable subscription

【解决方案1】：

我选择使用简单的 Promise，因为我只需要一个多播事件，但似乎 rxjs 已经使用 "Subjects" 处理它

  return this.service.add(this.formModel.value, this.imageFile)
    .toPromise() // this.subscribe((x) => value = x, (err) => reject(err), () => resolve(value));
    .then(id => this.formVm.editMode(id));

【讨论】：

【解决方案2】：

我使用以下方法解决了它：

if(this.observable === null) {
    console.log('Creating observable');
    let source = Observable.create((obs) => {

        console.log('firing xhr');
        let xhr;

        xhr.onload = () => {
            this.data = data;
            this.loaded = true;
            obs.next(data);
            obs.complete();
            this.observable = null;
        }

        xhr.onerror = () => {
            obs.error(error);
            this.observable = null;
        }
    });

    let subject = new Subject();

    this.observable = source.multicast(subject);

    this.observable.connect();
}

http://reactivex.io/rxjs/manual/overview.html#multicasted-observables

【讨论】：