我怎样才能 return 在 Angular 7 中观察到？

Question

我有一个以前在 Angular 5.x 上的项目，我将其更新为 7。有一个特定的实例，我需要 return 一个 httpClient observable 但我可以不知道它在 Angular 中是如何变化的 7. 它在 callApi 函数的 "catch" 上给我一个错误。 [ts] 属性 'catch' 在类型 'Observable' 上不存在。 [2339]是我的错误

callApi(url: string): Observable<any> {

    return this.httpClient
        .get(url)
        .catch(this.handleError);
}

这是我的 config.service.ts 文件中的所有代码。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { environment } from './../environments/environment';

@Injectable()
export class ConfigService {

    private configUrl = environment.production ? './assets/config/config.prod.json' : './assets/config/config.dev.json';

    private _config: any;

    constructor(private httpClient: HttpClient) {
    }

    load(): Promise<any> {

        let promise: Promise<any> = new Promise((resolve: any) => {

            this.callApi(this.configUrl)
                .subscribe(config => {
                    this._config = config;
                    resolve(true)
                });
        });
        return promise;
    }

    getConfig(key: any) {
        return this._config[key];
    }

    private handleError(error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            let body = {}
            try {
                body = error.json();
            } catch (e) {
            }
            const err = body['error'] || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }

        console.error(errMsg);

        return Observable.throw(errMsg);
    }

    callApi(url: string): Observable<any> {

        return this.httpClient
            .get(url)
            .catch(this.handleError);
    }
}

Answer 1

Angular 6 从 RxJs 5 到 RxJs 6，并且有一些重大变化。

catch 已重命名为 catchError

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

当您从 RxJs 5 升级到 6 时，您可以安装一个兼容性库，但最好将您的代码修改为与 RxJs 6 兼容。

Answer 2

将您的 rxjs 库更新到更高版本并更改以下代码 - 您需要使用 rxjs 中的 pipe 运算符，这可能会解决您的 catchError() 问题 - 更改您的catch 作为 catchError

尝试这样的事情

callApi(url: string): Observable<any> {

    return this.httpClient
        .get(url).pipe(catchError(this.handleError));
}

希望这对您有所帮助 - 编码愉快:)

Answer 3

除了使用catchError而不是catch，因为HttpClientreturns是一个Observable，考虑到订阅一个Observable有3个回调参数对应成功事件，错误事件，然后是连接完成时的完成事件（大多数时候你可以忽略这个）。因此，您的代码可能如下所示：

config.service.ts

callApi(url: string): Observable<any> {
    return this.httpClient
        .get(url)
        .pipe(catchError(this.handleError)); // adjust handleError function, as necessary
}

some.component.ts

this.configService.callApi('https://google.com')
  .subscribe(
    goodResult => console.log(goodResult),
    error => console.log(error),
    () => console.log('the api call is done!')
  )

我怎样才能 return 在 Angular 7 中观察到？

How can I return an observable in Angular 7?

angular

angular7