等待通过RxJ解决的承诺

Question

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

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

我以这个问题为起点： RxJS等到答应解决

但是，使用此帖子中的解决方案，将同时向后端发送请求。

我的目标是仅发送一个请求，然后将后续请求推迟到运行中的请求完成为止。 请求完成后，应发出最后一个未决事件（就像debounceTime的情况一样）

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

workaround功能使用存储在“流”外部的promise来阻止并等待先前的请求。 这有效，并且仅发送对最后一个输入值的请求。 但是，这似乎不符合RxJs的概念，并且感觉很hack。

有没有办法用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

如果concatMap()顺序运行请求而不丢弃任何请求，请使用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，控制台

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

编辑 ：在较新的RxJS版本中，您甚至不需要使用fromPromise （或from ），只需在concatMap返回Promise。

Answer 2

您可以根据承诺创建可观察对象，并使用use delayWhen运算符，以便等到该可观察对象发出（承诺解决）。

import { timer } from 'rxjs';
import { delayWhen, from } from 'rxjs/operators';

const myPromise = new Promise(resolve => setTimeout(resolve, 3000)); // will resolve in 3 sec


const waitable = timer(0, 1000).pipe(delayWhen(() => from(myPromise)));
waitable.subscribe(x => console.log(x));

每次发射应延迟3秒。