Angular 6 / Rxjs – 如何基础：可观察的成功,错误,最后

发布时间：2020-12-17 07:25:15 所属栏目：安全来源：网络整理

导读：我正在构建一个最新的Angular 6架构并且来自AngularJS,这是我无法平衡的事情：HTTP请求的基本处理. 所以,为了这个问题,让我们说我想要一个可观察的.因为它似乎是Angular的未来. 我在AngularJS中找到了非常优雅的东西： service.getAll() .then(onSuccess) //

我正在构建一个最新的Angular 6架构并且来自AngularJS,这是我无法平衡的事情：HTTP请求的基本处理.

所以,为了这个问题,让我们说我想要一个可观察的.因为它似乎是Angular的未来.

我在AngularJS中找到了非常优雅的东西：

service.getAll()
    .then(onSuccess) // I process the data
    .catch(onError) // I do whatever needed to notify anyone about the issue
    .finally(onFinally); // I stop the loading spinner and other stuff

现在在Angular 6 / RxJS 6中,我不明白为什么一切都那么复杂,看起来不对.

我可以找到两种方法来做同上面的事情：

>满管

this.service.getAll()
    .pipe(
        map((data) => this.onSuccess(data)),catchError(error => of(this.handleError(error))),finalize(() => this.stopLoading())
    )
    .subscribe();

由于我们必须使用管道进行最终化,我不妨使用管道来处理所有事情,我认为最好的做法是让所有东西都按照相同的顺序排列.但是现在我们不得不抛出一些东西,称之为“(不太容易理解)”,我不喜欢这样.

>半管
所以我尝试了另一个想法,只有我需要的管道(finalize),我保留了订阅回调.

this.service.getAll()
.pipe(
    finalize(() => this.stopLoading())
)
.subscribe(
    (data) => this.onSuccess(data),(error) => this.handleError(error)
);

但是,好吧.是不是有点落后？我们仍然有没有实际名称的回调,我们在阅读处理和错误之前完成.奇怪的.

所以我肯定不明白.我在网上找不到任何与此基本问题相关的内容.你要么有人想要“最终成功”,要么“成功与错误”,但没有人想要其中的3个.
也许我太老了,我不明白最新的最佳实践(如果是这样,请教育我！).

我的需要很简单：
1.我想处理从服务中获得的数据
2.我想得到错误以便向用户显示
3.我想停止在调用之前刚启动的加载微调器,或者在第一个完成成功或错误后再拨打一次电话(我真的想要最后一个)

如何使用observable处理基本的HTTP调用？

(我不想要任何.toPromise,拜托,我想了解如何处理这些新东西)

我认为有一个关键的误解：

You either have someone who wants “success and finally”,or “success and error” but none wants the 3 of them.

这不完全正确.每个Observable都可以发送零个或多个下一个通知,一个错误或完整通知,但绝不会同时发送.例如,当成功进行HTTP调用时,您将获得一个下一个完整的通知.在错误的HTTP请求中,您只有一个错误通知,就是全部.见http://reactivex.io/documentation/contract.html

这意味着你永远不会有一个Observable发出错误和完整.

然后是finalize运算符.在处理链时调用此运算符(包括普通取消订阅).换句话说,它在错误和完整通知之后被调用.

所以你的第二个例子是正确的.我理解你在订阅之前包括finalize看起来很奇怪但事实上来自源Observable的每个排放首先从顶部到底部到达订阅者,如果它的错误或完整通知它触发处理器处理器自下而上(以相反的顺序)和此时调用finalize.见https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subscriber.ts#L150-L152

在您的示例中,使用finalize与将dispose处理程序自己添加到Subscription对象中相同.

const subscription = this.service.getAll()
  .subscribe(
    (data) => this.onSuccess(data),(error) => this.handleError(error)
  );

subscription.add(() => this.stopLoading());

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!