Question

我在服务中有一个调用保存功能的按钮。

    <button (click)="save()">save</button>

    save() {
     this.someService.save().subscribe(r => {
       console.log({ r });
     });
    }

我希望每次单击按钮时，动作（服务中的save方法）将插入队列。

服务上的当前保存方法完成后，从队列中取出下一个，然后再次调用以从服务中保存方法，依此类推，直到队列中没有任何内容为止。

我尝试过类似的方法，但是我不确定为什么它只能使用一次。.

*注意：save中的SomeService功能我无法更改。

    save() {
     this.someService.addToQueue(true).subscribe(r => {
       console.log({ r });
     });
    }

@Injectable({
  providedIn: "root"
})
export class SomeService {
  queue = new Subject();

  constructor() {
    this.queue.pipe(concatMap(a => this.save(a)));
  }

  addToQueue(saveAndExit) {
    this.queue.next(saveAndExit);

    return this.queue;
  }

  save(saveAndExit) {
    return Observable.create(obs => {
      setTimeout(() => {
        obs.next({ data: true });
      }, 5000);
    });
  }
}

Demo on stackblitz

Answer 1

此处concatMap的问题在于，它直到下一个内部Observable才订阅下一个内部Observable。如果完成：

  save(saveAndExit) {
    return Observable.create(obs => {
      setTimeout(() => {
        obs.next({ data: true });
        obs.complete()
      }, 5000);
    });
  }

您的问题将得到解决，但是由于您无法更改该功能，因此需要使用f.ex手动完成它。 take(1)或first()：

this.queue.pipe(concatMap(a => this.save(a).pipe(take(1)) ));

如何在rxjs中实现对函数调用的队列？

1 个答案: