Angular 5-如何在http調用中鏈接可觀察對象？

Question

我正在使用Angular 5編寫一個應用程序，我想將原始的http調用保留在自己的服務中，以便其他服務可以根據需要操縱響應。 例如，我將有一個組件，組件服務和組件數據服務。

如何用這種模式將可觀察物鏈接起來？ 這是我嘗試過的：

licenseData.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { CONSTANT } from '../../environment/constants';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class LicenseDataService {

    constructor(private http: HttpClient) {}

    getLicenseInfo() {

        const params = new HttpParams()
            .set('unsername', 'swapp')
            .set('comment', "hi");

        const endpoint = '/myendpoint';

        return this.http
            .get(endpoint, {params: params})
            .map((response) => {
                console.log(' response ', response);
                //return Observable.of<any>(response);
                return response['data'];
            })
            .catch(this.errorHandler);
    }

    errorHandler(error: HttpErrorResponse) {
        //TODO: log the error here
        return Observable.throw(error);
    }

}

license.service.ts

import { Injectable } from '@angular/core';
//import { Observable } from 'rxjs/Observable';
import { LicenseDataService } from './licenseData.service';

@Injectable()
export class LicenseService {

    constructor(private licenseDataService: LicenseDataService) { }

    getVersion() {

        //handle the error in here and the loading as well

        return this.licenseDataService.getLicenseInfo()
            .subscribe((response) => {
                return response['versionNumberField'];
            });
        //console.log(' result ', result);

        //return result['versionNumberField'];
    }

}

這是我的組件代碼的一部分：

export class AboutComponent implements OnInit {

    //version: Observable<string>;
    version: string;

    constructor(private licenseService: LicenseService) {
        console.log('Hello Component');
    }

    ngOnInit() {
        console.log('ngOnInit');

        //this.version = this.licenseService.getVersion();

        this.licenseService.getVersion()
           .subscribe(response => this.version = response);
    }

}

我的項目無法建立。 如何正確鏈接？

Answer 1

您無法訂閱Subscribtion對象。

您已在LicenseDataService中獲得以下代碼：

return this.licenseDataService.getLicenseInfo()
            .subscribe((response) => {
                return response['versionNumberField'];
            });

並且在LicenseService中，您嘗試訂閱已經是Subscribtion的LicenseDataService返回的內容。 選項之一是在LicenseService中使用map ，然后在Component中訂閱。

  return this.licenseDataService.getLicenseInfo()
            .map((response) => {
                return response['versionNumberField'];
            });

在此之后，您在組件中的subscribe應該可以工作。

我個人將只保留一項服務-這些操作並不那么復雜。

Answer 2

除非絕對必要，否則您不想在服務內部管理訂閱。

如果您是我，那么我會將HTTP服務公開為可觀察的，並使用共享重播，以便在您通過應用程序的生命周期訂閱a​​ppVersion時它共享結果。 這樣，您就不會在服務內部擁有內部訂閱，這是一種代碼味道。

    @Injectable()
    export class LicenseService {


          private _appVersion$;

          get appVersion$(){
              if(!this_appVersion$){
                this._appVersion$ = this.getVersion().pipe(shareReplay());   
              }
              return this._appVersion$;
          }

          private getVersion() {

        //handle the error in here and the loading as well

            return this.licenseDataService.getLicenseInfo()
               .pipe(
                  map(response => return response['versionNumberField'] as any
               );
         }     
   } 

然后，在組件中，您可以注入服務並訂閱可觀察的appVersion $以獲取應用程序版本值。

我這樣做的原因是，它將所有內容都保留在更具響應性的編程范例中，並允許您將動作與其他異步代碼鏈接在一起。 而且它在服務內部沒有訂閱。