Subscribe est déprécié : Utilisez un observateur au lieu d'un rappel d'erreur

Question

Quand je lance le linter, ça dit :

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

Code (d'une application angulaire 7 avec angular-cli) :

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

Je ne sais pas exactement ce que je dois utiliser et comment...

Merci !

Answer 1

subscribe n'est pas déprécié, seule la variante que vous utilisez est dépréciée. A l'avenir, subscribe ne prendra qu'un seul argument : soit le next un gestionnaire (une fonction) ou un objet observateur.

Dans votre cas, vous devriez donc utiliser :

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

Voir ces problèmes GitHub :

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

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

Answer 2

Il est peut-être intéressant de noter que le observer L'objet peut également (encore) contenir le complete() et d'autres propriétés supplémentaires. Exemple :

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

De cette façon, il est beaucoup plus facile d'omettre certaines méthodes. Avec l'ancienne signature, il était nécessaire de fournir undefined et s'en tenir à l'ordre des arguments. Maintenant, c'est beaucoup plus clair quand, par exemple, on ne fournit qu'un gestionnaire suivant et complet.

Answer 3

Pour moi, c'était juste la version typographique vers laquelle pointait mon VSCode.

J'ai trouvé de l'aide ici Commentaire sur GitHub .

Je crois que c'est un problème de typographie. Quelque chose dans les versions les plus récentes de typescript provoque l'affichage de cet avertissement dans vs code. J'ai réussi à le faire disparaître en cliquant sur la version de typescript dans le coin inférieur droit de vs code, puis en choisissant l'option select typescript version. Je l'ai réglé sur la version de node_modules que nous avons installée dans notre projet angular, qui dans notre cas est 4.0.7. Cela a fait disparaître les avertissements.

Answer 4

Vous pouvez obtenir cette erreur si vous avez un objet typé en tant que Observable<T> | Observable<T2> - à l'opposé de Observable<T|T2> .

Par exemple :

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

Le compilateur fait no faire obs de type Observable<number | string> .

Vous serez peut-être surpris d'apprendre que l'erreur suivante est générée par les éléments suivants Use an observer instead of a complete callback y Expected 2-3 arguments, but got 1.

obs.subscribe(value => {

});

C'est parce qu'il peut être de deux types différents et que le compilateur n'est pas assez intelligent pour les réconcilier.

Vous devez modifier votre code pour qu'il renvoie Observable<number | string> au lieu de Observable<number> | Observable<string> . Les subtilités de ce processus varient en fonction de ce que vous faites.

Answer 5

J'ai migré mon Angular projet de TSLint a ESLint et l'avertissement ne s'affiche plus !

J'ai suivi les étapes suivantes. (A la fin de chaque étape, je recommande également de valider les changements).

1. Ajouter eslint : ng add @angular-eslint/schematics

2. Convertir tslint en eslint : ng g @angular-eslint/schematics:convert-tslint-to-eslint

3. Retirer tslint y codelyzer : npm uninstall -S tslint codelyzer

4. Si vous aimez réparer automatiquement les problèmes de peluches. ng lint --fix (Il y aura également une liste des problèmes non résolus).

5. Dans VSCode, désinstallez le TSLint plugin, installer ESLint plugin et recharger le VSCode.

6. Assurez-vous qu'il a mis à jour le paquet et les fichiers de verrouillage du paquet. Aussi les node_modules dans votre projet.

7. Si vous avez le tsconfig.json sous le sous-répertoire - vous devez ajouter/mettre à jour le fichier projects-root-directory/.vscode/settings.json avec le sous-répertoire où se trouve le tsconfig Les fichiers sont !

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

• Angular migre de TSLint vers ESLint Référence