订阅已过时：RxJs 中 .subscribe() 的新用法-原创手记-慕课网

你不是一个人。刚开始的时候可能会有点困惑，但别担心。问题的关键在于你在RxJS代码中处理订阅的方式上。让我们一步步教你如何更新代码以符合最新的标准。

订阅方法已过时：RxJs 中 .subscribe() 的新用法

弄清楚这个问题

这里有一个过时模式的示例：

    this.userService.updateUser(data).pipe(  
       tap(() => {  
          // 进行一些转换操作  
       })  
    ).subscribe(  
       data => this.data = data  
    );

虽然这种语法可以工作，但问题是你使用的变体已经被弃用。在 RxJS 的未来版本中，.subscribe 方法仅接受一个参数：要么是一个 next 处理函数，要么是一个观察者对象。

这有助于在处理错误、成功和完成状态时提高可读性和灵活性。

如何正确使用 subscribe

与其传入多个参数到subscribe，可以使用一个显式定义了处理程序的observer对象。以下是更新后的版本如下：

    this.userService.updateUser(data).pipe(  
       tap(() => {  
          // 做一些处理  
       })  
    ).subscribe({  
       next: (data) => {  
          // 将数据赋值给this.data;
          this.data = data;  
       },  
       error: (error) => {  
          this.toast('error', error);  
       }  
    });

这里出什么事了？

next: 处理成功发射。
error：优雅处理错误。
complete（可选）：当完成时执行。

一个变化为什么这么重要

这种观察者模式（Observer Pattern）带来了以下好处：比如：

更清晰 — 每个处理器的作用更易理解。
更灵活 — 可以省去不需要的处理器，无需用 undefined 占位。
更具一致性 — 鼓励在 RxJS 代码库中保持模式的一致性。

例如，如果你只需要处理 next 事件处理，可以省略 error 或 complete 处理程序即可。

this.activatedRoute.queryParams.subscribe({
    next: (queryParams) => {
        console.log('查询参数', queryParams);
    }
});

例子：之前和之后

不推荐的方式：

this.activatedRoute.queryParams.subscribe(  
   (queryParams) => {  
      console.log('queryParams', queryParams);  
   },  
   (error) => {  
      console.error(error);  
   }  
);

以下代码订阅来自激活路由的查询参数并将其记录到控制台。

新（推荐的）方式：

    this.activatedRoute.queryParams.subscribe({
       next: (queryParams) => {
          console.log('查询参数', queryParams);
       },
       error: (err: any) => {
          console.error('错误', err);
       },
       complete: () => {
          console.log('观察完成。');
       }
    });

更深入地了解观察者模式

观察者对象可以包含以下方法中的任意组合。

**next** – 处理传入的值，
**error** – 捕获并处理错误，
**complete** – 在可观察对象完成时触发，

以下是一个包含所有处理程序的示例.

    this.fetch().subscribe({
       next: (account: Account) => {
          console.log(account);
          console.log("你的代码...");
       },
       error: (e) => {
          console.error(e);
       },
       complete() {
          console.log("完成啦。");
       },
    });

为什么引入了这个变化？

此次更新的动机如下所述，请参阅以下GitHub讨论。

RxJS团队的主要任务是：

简化 API。
减少在处理不同状态时可能出现的混淆。
鼓励开发人员更明确地管理观察对象，并减少对位置参数的依赖。

最后：

通过使用观察者对象模式，你的 RxJS 代码将更易于维护、更易于阅读，并面向未来。这种方法符合现代的最佳实践，并确保你的应用程序能与未来发布的 RxJS 版本保持兼容。

所以下次当你使用 .subscribe 时被代码风格检查器标记，将其视为优化代码的机会。祝你编程愉快！