javascript - 如何使用 rxjs 进行自动保存？

问题描述

如何rxjs按照这些标准进行自动保存？

单击保存按钮应该发出 http 请求以保存我的数据（来自局部变量，而不是表单）。
每 3000 毫秒（间隔）应该像我点击按钮一样做同样的事情。
不能并行http请求。在请求处于活动状态之前，另一个请求在完成之前不应运行。如果请求开始了，那么所有其他请求都应该在队列中等待（然后一个接一个地执行）。
保存按钮应该在队列/执行中获得高优先级。

我想使用 rxjs 的强大功能，因此最好使用 rxjs 运算符而不是局部变量 ( if (this.requestStart === true))。

这是要我做到这一点。任何帮助将不胜感激

import { Component, Input } from '@angular/core';
import {Observable, interval} from 'rxjs';

@Component({
  selector: 'hello',
  template: `

  <h1>Hello {{name}}!</h1>
  <button (click)="save()">save</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;

  constructor() {
    interval(3000)
      .subscribe(val => this.makeRequest());

  }

  save() {
    this.makeRequest().subscribe(res => {
      console.log({ res });
    });
  }

  makeRequest() {
    return Observable.create((observer) => {
      setTimeout(() => {
        observer.next({ save: true });
        observer.complete();
      }, 5000);
    });
  }
}

标签： javascriptangularrxjs

在这种情况下，您可以使用switchMapand concatMap：

manualSave$ = new Subject<any>();

constructor(private http: HttpClient) { }

ngOnInit() {
  this.manualSave$.pipe(
    switchMap(() => timer(0, 3 * 1000)),
    concatMap(() => this.makeRequest())
  ).subscribe(result => {
    console.log(result);
  })
  this.manualSave$.next(); // to start it off
}

save() {
  this.manualSave$.next();
}

makeRequest() {
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  return this.http.get(url);
}

会发生什么：

---1---2---3---4---5---6---...
-----X------X------------X-...
      switchMap                // Preserves 3 second interval after every save
                               // Unless interrupted by a manual save
---A-B---A--B---A---A---AB-... // A: http request generated from autosave
                               // B: http request generated from manual save
      concatMap
---ResResResRes-Res-Res-ResRes-... 
                   // Concats one request only after the last one is finished

我更喜欢使用switchMap而不是合并，因为merge这样做：

---1----2----3----4----5----6---...
-----X--------X-------------X---...
      merge
---1-X--2----3X---4----5----(6X)...

WhileswitchMap取消以前的值并执行此操作：

---1----2----3----4----5----6---...
-----X--------X-------------X---...
      switchMap
---1-X----2---X----4----5---X---...

只提出必要数量的请求。

javascript - 如何使用 rxjs 进行自动保存？

问题描述

解决方案

推荐阅读