问题描述
我正在使用一个Angular应用程序,该应用程序显示了从RESTful API获取的项目列表。 列表的内容取决于查询。 可以通过填写输入字段,使用提交按钮或将其添加为URL作为查询参数来传递查询。
为了确保一切正常运行并防止异步问题,我使用了 。
现在,我想知道如何处理错误,因为错误可能发生在流的中间,例如。 当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;
});
可能的解决方案
我已经读过有关引发 ,但是这里的问题是流在第一个错误之后似乎停止了,并且不会触发新事件。
使用
onErrorResumeNext来忽略错误,并确保流在出现错误后继续。 但是我找不到正确地“处理”错误并将其显示给最终用户的方法。
题
在这种情况下是否有建议的方法来处理错误? 为此有必要创建两个流,还是建议抛出异常?
重要的是,用户必须知道出了点问题,并且在第一个错误发生后流不会停止。
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;
});