不推荐使用订阅：使用观察者而不是错误回调

Question

当我运行 linter 时，它会说：

subscribe is deprecated: Use an observer instead of an error callback

代码（来自带有 angular-cli 的 Angular 7 应用程序）：

    this.userService.updateUser(data).pipe(
       tap(() => {bla bla bla})
    ).subscribe(
       this.handleUpdateResponse.bind(this),
       this.handleError.bind(this)
    );

不知道具体应该使用什么以及如何使用...

谢谢！

Answer 1

在官网查看详情 https://rxjs.dev/deprecations/subscribe-arguments

请注意下面第二个订阅代码中的 {} 大括号。

import { of } from 'rxjs';

// recommended 
of([1,2,3]).subscribe((v) => console.info(v));
// also recommended
of([1,2,3]).subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('complete') 
})

Answer 2

我将我的Angular 项目从TSLint 迁移到ESLint，现在它不再显示警告了！

我遵循了这些步骤。 （每个步骤结束我也建议提交更改）

1. 添加 eslint： ng add @angular-eslint/schematics

2. 将 tslint 转换为 eslint： ng g @angular-eslint/schematics:convert-tslint-to-eslint

3. 删除tslint 和codelyzer：npm uninstall -S tslint codelyzer

4. 如果您想自动修复许多 Lint 问题 ng lint --fix（还会列出未修复的问题）

5. 在VSCode中卸载TSLint插件，安装ESLint插件并重新加载VSCode。

6. 确保它更新了包和包锁定文件。还有你项目中的 node_modules。

7. 如果您在子目录下有tsconfig.json 文件 - 您需要使用tsconfig 文件所在的子目录添加/更新projects-root-directory/.vscode/settings.json！

   {
     "eslint.workingDirectories": [
       "sub-directory-where-tsconfig-files-are"
     ]
   }
   

• VS Code 官方页面上的信息：Migrate from TSLint to ESLint（感谢您在评论中指出这一点！）
• Angular 从 TSLint 迁移到 ESLint Reference

Answer 3

你应该用 eslint 替换 tslint。

由于 TSLint 已被弃用，它不支持 RXJS 的 @deprecated 语法。 ESLint 是正确使用的 linter，可以正确地订阅 linting。

Answer 4

对我来说，这只是我的 VSCode 指向的 typescript 版本。

从这个GitHub comment获得帮助。

我相信这是一个打字稿问题。最新版本的打字稿中的某些内容导致此警告显示在 vs 代码中。通过单击 vs code 右下角的 typescript 版本，然后选择 select typescript version 选项，我可以让它消失。我将它设置为我们在 Angular 项目中安装的 node_modules 版本，在我们的例子中恰好是 4.0.7。这导致警告消失。

Answer 5

我收到警告是因为我将其传递给订阅：

myObs.subscribe(() => someFunction());

由于返回单个值，与subscribe的函数签名不兼容。

切换到此会使警告消失（返回 null/void）；

myObs.subscribe(() => {
  someFunction();
});

Answer 6

如果您有一个类型为 Observable<T> | Observable<T2> 的对象，而不是 Observable<T|T2>，则会出现此错误。

例如：

    const obs = (new Date().getTime() % 2 == 0) ? of(123) : of('ABC');

编译器不会生成obs 类型为Observable<number | string>。

您可能会感到惊讶，以下内容会给您错误Use an observer instead of a complete callback 和Expected 2-3 arguments, but got 1.

obs.subscribe(value => {

});

这是因为它可能是两种不同类型之一，而编译器不够聪明，无法协调它们。

您需要更改代码以返回 Observable<number | string> 而不是 Observable<number> | Observable<string>。其细微之处会因您的操作而异。

Answer 7

可能有趣的是，observer 对象还可以（仍然）包含complete() 方法和其他附加属性。示例：

.subscribe({
    complete: () => { ... }, // completeHandler
    error: () => { ... },    // errorHandler 
    next: () => { ... },     // nextHandler
    someOtherProperty: 42
});

这样可以更容易地省略某些方法。对于旧签名，必须提供 undefined 并遵守参数的顺序。现在，例如仅提供 next 和 complete 处理程序时，情况就更清楚了。

Answer 8

subscribe 没有被弃用，只有你正在使用的变体被弃用。将来，subscribe 将只接受一个参数：next 处理程序（一个函数）或观察者对象。

所以在你的情况下你应该使用：

.subscribe({
   next: this.handleUpdateResponse.bind(this),
   error: this.handleError.bind(this)
});

查看这些 GitHub 问题：

• https://github.com/ReactiveX/rxjs/pull/4202

• https://github.com/ReactiveX/rxjs/issues/4159