订阅已弃用：使用观察者而不是错误回调

Question

当我运行 linter 时它说：

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

来自 this angular app 的代码：

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

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

谢谢！

Answer 1

subscribe 未弃用，仅弃用了您使用的变体。将来，subscribe 将只接受一个参数：next 处理程序（函数）或观察者对象。

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

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

查看这些 GitHub 问题：

Answer 2

如果对象类型为 Observable<T> | Observable<T2> 而非 Observable<T|T2>.

，则可能会出现此错误

例如：

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

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

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

obs.subscribe(value => {

});

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

您需要将代码更改为 return Observable<number | string> 而不是 Observable<number> | Observable<string>。这一点的微妙之处取决于你在做什么。

Answer 3

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

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

这样可以更容易地省略某些方法。使用旧签名，必须提供 undefined 并遵守参数顺序。现在，当例如只提供下一个完整的处理程序时，它就更清楚了。

Answer 4

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

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

因为它 returns 是一个单一的值，所以它与 subscribe 的函数签名不兼容。

切换到此使警告消失 (returns null/void);

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

Answer 5

对我来说，这只是我的 VSCode 指向的打字稿版本。

得到了帮助GitHub comment。

I believe this is a typescript issue. Something in the newest versions of typescript is causing this warning to display in vs code. I was able to get it to go away by click the version of typescript in the bottom right corner of vs code and then choosing the select typescript version option. I set it to the node_modules version we have installed in our angular project which in our case happens to be 4.0.7. This caused the warnings to go away.

Answer 6

你应该用 eslint 替换 tslint。

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

Answer 7

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

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

添加eslint： ng add @angular-eslint/schematics
将 tslint 转换为 eslint： ng g @angular-eslint/schematics:convert-tslint-to-eslint
删除tslint和codelyzer：npm uninstall -S tslint codelyzer
如果您想自动修复许多 Lint 问题 ng lint --fix（还会列出未修复的问题）
在VSCode中卸载TSLint插件，安装ESLint插件并重新加载VSCode。
确保它更新了程序包和程序包锁定文件。还有你项目中的node_modules。
如果子目录下有 tsconfig.json 文件 - 您需要 add/update projects-root-directory/.vscode/settings.json 和 tsconfig 文件所在的子目录是！
```
{
  "eslint.workingDirectories": [
    "sub-directory-where-tsconfig-files-are"
  ]
}
```

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

Answer 8

在官方网站上找到详细信息 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') 
})

订阅已弃用：使用观察者而不是错误回调

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

callback

deprecated

subscribe

rxjs

tslint