Angular 6 / Rxjs - 如何基础：observables 成功，错误，最后

Question

我正在最新的 Angular 6 上构建一个架构，并且来自 AngularJS，有一些我无法解决的问题：HTTP 请求的基本处理。

所以，为了这个问题，假设我想要一个 observable。因为它似乎是 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 中，我不明白为什么一切都如此复杂而且看起来不正确。

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

1. 完整的管道

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

由于我们必须使用管道进行最终确定，我不妨对所有内容都使用管道，我认为最好让所有内容都按相同的顺序排列。但是现在我们必须抛出一些东西，叫做“of”（不太容易理解），我不喜欢这样。

1. 半管 所以我尝试了另一个想法，只使用我需要的管道（最终确定）并保留订阅回调。

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

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

所以有些东西我绝对不明白。而且我在网上找不到与这个基本问题相关的任何内容。您要么有人想要“成功并最终”，要么有人想要“成功和错误”，但没有人想要其中的 3 个。 也许我太老了，我不了解新的最佳实践（如果是这样，请教育我！）。

我的需求很简单：
1. 我想处理从服务获得的数据
2. 我想得到错误以便显示给用户
3.我想在调用之前停止我刚刚启动的加载微调器，或者在第一个完全成功或错误后再次调用（我真的想要一个finally）

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

（我不想要任何.toPromise，拜托，我想了解如何处理新东西）

Answer 1

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

你要么有人想要“成功和最终”，或者“成功和错误”，但没有人想要他们中的 3 个。

这并不完全正确。每个 Observable 可以发送零个或多个 next 通知和一个 error 或 complete 通知，但不能同时发送两者。例如，当进行成功的 HTTP 调用时，您将收到一个 next 和一个 complete 通知。在错误的 HTTP 请求中，您将只有一个 error 通知，仅此而已。见http://reactivex.io/documentation/contract.html

这意味着你永远不会有一个 Observable 同时发射 error 和 complete。

然后是finalize 运算符。处理链时调用此运算符（也包括普通取消订阅）。换句话说，它在error 和complete 通知之后被称为。

所以你的第二个例子是正确的。我知道您在订阅之前包含finalize 看起来很奇怪，但实际上，源 Observable 的每个发射首先从上到下到达订阅者，如果它的error 或complete 通知它会触发处置处理程序自下而上（以相反的顺序），此时调用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());

Answer 2

我认为正确的方法是使用 Observable 函数：next、err、complete。
这是一个如何触发完整功能的示例。
假设我们有 BehaviorSubject 对象：

let arr = new BehaviorSubject<any>([1,2]);

现在假设我们想要订阅它，如果我们得到值“完成”我们想要完成。

let arrSubscription = arr.asObservable().subscribe(
  data => {
      console.log(data)
      if(data === 'finish') {
        arr.complete()
      }
  },
  err => {
      console.log(err)
  },
  () => {
      console.log("Complete function triggered.")
  }
);
arr.next([3,4])
arr.next('finish')
arr.next([5,6])

控制台日志是：

[1,2]
[3,4]
finish
Complete function triggered.

由于我们触发了 complete 函数，因此 BehaviorSubject 的最后一个 .next 不会被触发，因为 err 和 complete 函数是订阅的终止符。
这只是一个示例，您可以如何触发完整的功能，从这里您可以做任何您想做的事情。

Answer 3

Observable 的 subscribe 方法接受 3 个可选函数作为参数

• 第一个处理由引发的事件附带的数据 可观察的
• 第二个处理任何错误（如果发生）
• 第三个在 Observable 完成时做某事

所以，如果我理解正确的话，你想要的可以用这样的代码来实现

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

考虑一下，当您想要重试（请参阅retry 运算符）以防出现竞争条件（通过使用switchMap 运算符）时，使用 Observables 进行 http 调用可以带来好处。我认为这些是 Angular 团队为 http 客户端选择这种方法的主要原因。

一般来说，我认为值得开始了解 Observables 是如何工作的以及一些最重要的运算符（除了上面的那些，我首先想到的是 mergeMap、filter、reduce - 然后还有还有许多其他）很重要，因为它们可以显着简化异步非阻塞环境中的许多任务，例如浏览器（或节点）。