如何使用Angular处理RxJS中的错误

Question

我正在使用一个Angular应用程序，该应用程序显示了从RESTful API获取的项目列表。 列表的内容取决于查询。 可以通过填写输入字段，使用提交按钮或将其添加为URL作为查询参数来传递查询。

为了确保一切正常运行并防止异步问题，我使用了RxJS 。

现在，我想知道如何处理错误，因为错误可能发生在流的中间，例如。 当HTTP请求失败时。

查询作为输入流

这是两个Observables ，它们都发送查询序列。

// first observable for the submit button
submitFormObservable = $scope.$createObservableFunction('search');

// second observable for when the input value changes
inputObservable = $scope.$toObservable('query')
  .map(function (change) {
    return change.newValue;
  });

获取结果

下面的Observable会在查询已更改时触发，并从API获取结果。

var mainStream = Rx.Observable.merge([submitFormObservable, inputObservable])
  .where(function (query) {
    return query && query.length > 0;
  })
  .debounce(400)
  .distinctUntilChanged()
  .select(getResultsForQuery)
  .switchLatest();

处理错误

现在我不知道如何处理错误，例如。 getResultsForQuery引发错误。 我想显示错误而不是结果，但是阻止Observable处理新事件。

目前，我已经通过在Observable中创建两个新的流来解决此问题，一个流在成功时处理结果，一个在发生错误时处理结果。 查询无效时的响应数据包含error属性。

成功流

// stream containing the album information from LastFm
mainStream
  .filter(function (response) {
    return !response.data.error;
  })
  .map(function (response) {
    return response.data.result;
  })
  .subscribe(function (result) {
    $scope.error = undefined;
    $scope.result = result;
  });

错误流

mainStream
  .filter(function (response) {
      return response.data.error;
    })
   .map(function (response) {
      return response.data;
  });
  .subscribe(function (error) {
    $scope.result = [];
    $scope.error = error;
  });

可能的解决方案

1. 我已经读过有关引发和捕获错误的信息 ，但是这里的问题是流在第一个错误之后似乎停止了，并且不会触发新事件。

2. 在文档中介绍了使用onErrorResumeNext来忽略错误，并确保流在出现错误后继续。 但是我找不到正确地“处理”错误并将其显示给最终用户的方法。

题

在这种情况下是否有建议的方法来处理错误？ 为此有必要创建两个流，还是建议抛出异常？

重要的是，用户必须知道出了点问题，并且在第一个错误发生后流不会停止。

Answer 1

捕获逻辑的问题在于，它有效地终止了它之前的序列，这就是为什么如果在顶级流中使用它，它将在单个异常后停止的原因。 我建议您将catch逻辑包装在flatMapLatest 。 然后，您可以捕获内部流并转换数据以符合下游observers期望。

像这样：

var mainStream = Rx.Observable.merge([submitFormObservable, inputObservable])
  .where(function (query) {
    return query && query.length > 0;
  })
  .debounce(400)
  .distinctUntilChanged()
  .selectSwitch(function(input) {
    return getResultsForQuery(input)
            .map(function(response) {
              return {result : response.data.result};
            })
            .catch(function(e) {
              return Rx.Observable.just({error : error});
            });
  });

mainStream.subscribe(function(r) {
  $scope.result = r.result || [];
  $scope.error = r.error;
});