RxJs flatMap to Rx.DOM.getJson不触发
有些时候，我很难让flatMap与Rx.DOM.getJson()一起工作，我不知道我做错了什么。
html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/7.0.3/rx.dom.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xta1/t39.3284-6/12624096_747368668729465_1053913233_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xaf1/t39.3284-6/12624065_1518596455100766_427485197_n.js"></script>
<title>JS Bin</title>
</head>
<body>
<button id='fetch'>Fetch</button>
<div id="content"></div>
</body>
</html>javascript
// Actions
const Actions = {
LoadPosts: 'LoadPosts'
};
// Disptacher
const Dispatcher = new Rx.Subject();
function send(action) {
Dispatcher.onNext({action: action});
}
// Stores
const url = 'http://jsonplaceholder.typicode.com/posts';
const FetchedPosts$ = Dispatcher
.filter(x => Actions.LoadPosts === x.action)
.do(x => console.log(x))
.flatMap(() => {
console.log('flat');
return Rx.DOM.getJSON(url);
})
.do(x => console.log('after', x));
// Views
const fetchButton = document.getElementById('fetch');
const Fetch$ = Rx.Observable.fromEvent(fetchButton, 'click')
.do(x => send(Actions.LoadPosts));
const PostsView$
= FetchedPosts$.map(posts => posts.map(post => <li>{post.title}</li>));
const RootView$ = Rx.Observable.merge(Fetch$, PostsView$);
RootView$.subscribe(
content => ReactDOM.render(
<ul>{content}</ul>,
document.getElementById('content')
)
);输出
[object Object] {
action: "LoadPosts"
}
"flat"
"Script error. (line 0)"因此，输出显示我正在进入平面映射，如果我取出Rx.DOM.getJSON(url)并订阅它，我就可以写出返回的值。但是，在flatMap中没有任何返回，我在网络选项卡中看到一个错误，显示Rx正在取消请求，如下所示。
这里有一个JsBin：http://jsbin.com/geruzo/edit?js,console,output
编辑我刚刚注意到移除react允许Rx.DOM调用成功。
回答 1
Stack Overflow用户
发布于 2016-05-18 17:41:32
好的，我将通过引用您的jsbin代码来回答这个问题，它与已发布的代码不同，但对我来说更容易检查。
首先，您的代码的固定版本可以在这里找到：http://jsbin.com/yugener/edit?html,js,output
您的第一个问题是，"LoadPosts“操作是在每次呈现时触发的，而不必单击按钮，这将导致无休止的呈现循环。.>.>.
// The send will just be executed when the component is rendered
<button click={send(Actions.LoadPosts)}>fetch</button>它应该是(也是onClick，而不是单击)：
<button onClick={() => send(Actions.LoadPosts)}>Fetch</button>由于有一个呈现循环，并且"LoadPosts“操作继续触发，所以在上一个请求完成之前再次调用了Rx.DOM.getJSON，因此它将取消先前的请求。您会得到一个错误抛出(请求中止等)，并捕获它：
.flatMap(() => Rx.DOM.getJSON('http://jsonplaceholder.typicode.com/posts'))
.catch(error => console.log('error', error))在RXJS中，catch操作符希望您返回一个可观察到的，因为您没有返回未定义的，这反过来会引发以下错误：
Uncaught TypeError: Cannot read property 'subscribe' of undefined另外，在您的例子中，您应该使用flatMap，而不是使用switchMap (别名flatMapLatest)，因为每次触发"LoadPosts“操作时，您都希望忽略所有以前的请求，并且只从最后一个请求中获取数据。有关两者之间差异的更多信息：flatMap vs switchMap。在您可能希望通过设计中止以前的请求的情况下，flatMap还将避免获得“中止”错误，因为以前可观察到的不再发出值。
https://stackoverflow.com/questions/37244845
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号