如何从XHR创建Observable

Question

我正在尝试在Angular2中上传文件。我使用我在这里找到的代码- https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info。

我需要在我的史诗(Angular2 + Redux)中使用响应，所以我想这样做:

updateAvatarRequest = (action$: ActionsObservable<IPayloadAction>) => {
    return action$.ofType(MeActions.UPDATE_AVATAR)
      .mergeMap<IPayloadAction>(({payload}) => {
        return this.meService.updateAvatar()
          .map(result => ({
            // ACTION ON SUCCESS
          }))
          .catch(error => Observable.of({
            // ACTION ON ERROR
          }));
        });
}

问题是，我不会得到任何响应从我的Observable直到我不订阅它。另一个问题是，我不能在这个可观察对象上使用catch()。如果我这样做，它可以工作:

this.meService.updateUserAvatar(formData)
    .subscribe(
      (x) => console.log('onNext: %s', x),
      (e) => console.log('onError: %s', e),
      () => console.log('onCompleted')
);

但是我想保持一致。请帮我用这个RxJS，直到我失去剩下的头发。

Answer 1

我不会从Observable中得到任何响应除非我不订阅它

这是故意的。我假设action$.ofType(MeActions.UPDATE_AVATAR)返回一个冷可观察对象，所以它不会被触发，直到至少有一个订阅者。你可以使用publish()将其转换为ConnectableObservable，并立即调用connect()，这使它成为一个热门的可观察对象(https://jsbin.com/faquhew/5/edit?js,console)，但我认为最好坚持默认功能。

查看更多信息:

• RxJS——.subscribe vs .publish () () .connect ()

• 冷热观测:是否存在'Hot '和& # 39;冷# 39;运营商吗?

• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md cold-vs-hot-observables

操作符catch()让你用一个从它的回调返回的Observable继续这个链，参见:https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/catch.md

所以这取决于你想用catch()实现什么。

编辑:

var source = Observable.create(obs => {
    obs.next(1);
    obs.next(2);
    obs.error(new Error('original error message'));
  })
  .catch(error => Observable.of('recovered from error'));
source.subscribe(val => console.log(val));

打印到控制台:

1
2
"recovered from error"

查看实时演示:https://jsbin.com/micebeg/4/edit?js,console