javascript - 等待用 RxJs 解决的 promise

Question

我正在尝试使用 RxJS v5 beta 为表单实现“保存类型”功能.

当用户在文本字段中输入时，数据应该被发送到后端。我正在创建一个 Rx.Subject 来为新用户输入触发新事件 (next()) 并将其与 HTTP 请求一起发布。

我以这个问题为起点:RxJS wait until promise resolved

但是，使用这篇文章中的解决方案，同时向后端发送请求。

我的目标是只发送一个请求并推迟后续请求，直到正在运行的请求完成。完成请求后，应发出最后一个未决事件(就像 debounceTime 中的情况一样)

以下代码段中的示例 函数使用链接的 SO 问题中的方法。这将发送对所有输入值的请求。

workaround 函数使用存储在“流”外部的 promise 来阻止并等待先前的请求。这有效并且只发送对最后一个输入值的请求。但这似乎没有遵循 RxJs 的概念并且感觉很 hacky。

有没有办法用 RxJS 实现这个？

function fakeRequest(value) {
  console.log('start request:', value)
  return new Promise((resolve) => { 
    setTimeout(() => resolve(value), 1000);
 });
}

function example() {
  let subject = new Rx.Subject();
  
  subject
    .debounceTime(500)
    .switchMap(input => fakeRequest(input))
    .subscribe(data => console.log(data))

  subject.next('example value 1');
  subject.next('example value 2');
  subject.next('example value 3');
  subject.next('example value 4');
}


function workaround() {
  let subject = new Rx.Subject();

  let p = Promise.resolve();
  subject
    .debounceTime(500)  
    .switchMap(input => p.then(() => input))
    .do(input => p = fakeRequest(input))
    .subscribe(data => console.log(data))

  subject.next('workaround value 1');
  subject.next('workaround value 2');
  subject.next('workaround value 3');
  subject.next('workaround value 4');
}

example();
// workaround();

<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-rc.2/dist/global/Rx.js"></script>

Answer 1

如果您想按顺序运行请求而不丢弃任何请求，请使用 concat() 或 concatMap()运营商。这些等待直到前一个 Observable 完成，然后继续下一个。

function fakeRequest(value) {
  console.log('start request:', value)
  return new Promise((resolve) => { 
    setTimeout(() => resolve(value), 1000);
 });
}

let subject = new Subject();
subject.concatMap(value => Observable.fromPromise(fakeRequest(value)))
  .subscribe(value => console.log(value));

subject.next('example value 1');
subject.next('example value 2');
subject.next('example value 3');
subject.next('example value 4');

这会打印到控制台:

start request: example value 1
example value 1
start request: example value 2
example value 2
start request: example value 3
example value 3
start request: example value 4
example value 4

查看现场演示:https://jsbin.com/xaluvi/4/edit?js,console

如果您想忽略值，那么 debounce、throttle 或 audit 都是不错的选择。

编辑:在较新的 RxJS 版本中，您甚至不需要使用 fromPromise(或 from)，只需在 concatMap。