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

Question

我有一个调用保存函数的按钮，该按钮调用服务中的保存函数。

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

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

我希望每次单击按钮时操作(服务中的保存方法)都会插入到队列中。

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

我尝试了类似的方法，但我不确定为什么它只有效一次..

* 注意:SomeService 中的 save 函数我无法更改。

    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)) ));