Rx (RxJS) Url 生成器
Rx (RxJS) Url Builder
我正在寻找一种使用采用多个参数的 RxJS 构建 urlStream 的好方法。
var searchStream = new Rx.ReplaySubject(1);
var pageStream = new Rx.ReplaySubject(1);
var urlStream = new Rx.Observable.create((observer) => {
//What goes here?
//Should output something like http://apiurl.com?page=page&search=search
});
我的直觉是使用 Rx.Observable.merge(searchStream, pageStream);
但在你这样做之后你不知道哪个是哪个参数。
有了 searchStream 主题,它允许我在 searchStream.onNext("my search")
的应用程序中的多个位置使用主题,并让它触发数据引用。我见过很多使用一个 url 参数的示例,但还没有看到使用多个输入流的示例。
怎么样:
var searchStream = ...
var pageStream = ...
var urlStream = Rx.Observable.combineLatest(searchStream, pageStream, (search, page) => {
return baseUrl + `?search=${search}&page=${page}`;
})
.shareReplay(1);
我建议您在创建流时不要直接使用 Subject
s。可能触发参数更改的任何内容都可以很容易地包装在 Observable
中。
例如,您的搜索可能附加到某个文本框,其更改事件可能包含在 fromEvent
中
//This would create a stream that waits until the user has stopped
//typing for half a second before sending a request to update.
var searchStream = Rx.Observable.fromEvent($textbox, 'keyup')
.map(e => e.target.value)
.debounce(500);
我正在寻找一种使用采用多个参数的 RxJS 构建 urlStream 的好方法。
var searchStream = new Rx.ReplaySubject(1);
var pageStream = new Rx.ReplaySubject(1);
var urlStream = new Rx.Observable.create((observer) => {
//What goes here?
//Should output something like http://apiurl.com?page=page&search=search
});
我的直觉是使用 Rx.Observable.merge(searchStream, pageStream);
但在你这样做之后你不知道哪个是哪个参数。
有了 searchStream 主题,它允许我在 searchStream.onNext("my search")
的应用程序中的多个位置使用主题,并让它触发数据引用。我见过很多使用一个 url 参数的示例,但还没有看到使用多个输入流的示例。
怎么样:
var searchStream = ...
var pageStream = ...
var urlStream = Rx.Observable.combineLatest(searchStream, pageStream, (search, page) => {
return baseUrl + `?search=${search}&page=${page}`;
})
.shareReplay(1);
我建议您在创建流时不要直接使用 Subject
s。可能触发参数更改的任何内容都可以很容易地包装在 Observable
中。
例如,您的搜索可能附加到某个文本框,其更改事件可能包含在 fromEvent
//This would create a stream that waits until the user has stopped
//typing for half a second before sending a request to update.
var searchStream = Rx.Observable.fromEvent($textbox, 'keyup')
.map(e => e.target.value)
.debounce(500);