不赞成订阅:使用观察器而不是错误回调

当我打开缰绳时，上面写着:

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

这个angular应用中的代码:

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

我不知道该用什么，怎么用……

谢谢!

186598 次浏览
小开
最佳答案

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

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

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

请看这些GitHub问题:

小开

如果你有一个类型为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>。这其中的微妙之处取决于你在做什么。

小开

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

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

这样可以更容易地省略某些方法。对于旧的签名，必须提供undefined并坚持参数的顺序。现在，只提供下一个完整的处理程序就清楚多了。

小开

我得到这个警告是因为我正在传递这个来订阅:

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

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

切换到这个使警告消失(返回null/void);

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

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

VSCode状态栏

TypeScript版本选择器

Select local TypeScript version .

得到这个GitHub的评论的帮助。

我相信这是打字稿的问题。在最新版本的typescript中，某些东西导致这个警告显示在vs code中。我可以通过点击vs code右下角的typescript版本，然后选择select typescript版本选项来让它消失。我将它设置为我们在angular项目中安装的node_modules版本，在我们的例子中恰好是4.0.7。这使得警告消失了。

小开

你应该用eslint代替tslint。

由于TSLint已弃用，它不支持RXJS的@deprecated语法。ESLint是正确使用的检测器，正确执行订阅检测。

小开

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

我遵循这些步骤。(在每个步骤结束时，我还建议提交更改)

    <李> < p >添加eslint: ng add @angular-eslint/schematics < / p > 将tslint转换为eslint: ng g @angular-eslint/schematics:convert-tslint-to-eslint < / p >

  1. 删除tslint和codelyzer: npm uninstall -S tslint codelyzer

  2. 如果你想自动修复许多Lint问题 ng lint --fix(它也将列出未修复的问题)

    .

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

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

  5. 如果你的子目录下有tsconfig.json文件，你需要添加/更新projects-root-directory/.vscode/settings.json子目录下的tsconfig文件!

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

详细信息请访问官方网站 https://rxjs.dev/deprecations/subscribe-arguments < / p >

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

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')
})
小开

使用RxJS的新方法非常简单:

以前的版本:

this.activatedRoute.queryParams.subscribe(queryParams => {
console.log("queryParams, queryParams)


}, error => {
})

新版本:

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


error: (err: any) => { },
complete: () => { }
}
);

提交答案