使用Rxjs Observables的Angular Service无法正常工作

Question

I have a cloud function deployed with CORS enabled on it. I am trying to hit that API using Angular service and pass that data in json to my subscriber function in angular component. I am trying to hit a simple GET method. The rxjs version in 6+ and i am not sure what mistake i am making but i am not getting any reponse back.

Service File

import { AddClassesDto, ClassesDto } from './classesDtos';
import { AddClientDto, ClientDto } from './clientDtos';
import { AddCourseDto, CourseDto } from './courseDtos';
import { AddUserDto, UserDto } from './userDtos';
import { HttpClient, HttpHeaders, HttpResponse, HttpResponseBase } from '@angular/common/http';
import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
import { catchError as _observableCatch, mergeMap as _observableMergeMap, catchError, map } from 'rxjs/operators';
import { of as _observableOf, throwError as _observableThrow } from 'rxjs';

import { Observable } from 'rxjs/Observable';

export class ClientServiceProxy {
    private http: HttpClient;
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

    constructor(@Inject(HttpClient) http: HttpClient, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
        this.http = http;
        this.baseUrl = baseUrl ? baseUrl : "";
    }

GetClientData(): Observable<ClientDto> {
    let url_ = this.baseUrl + "xxxxxxxxxxxxxxxx/getClients";
    url_ = url_.replace(/[?&]$/, "");

    let options_ : any = {
        observe: "response",
        responseType: "blob",
        headers: new HttpHeaders({
            "Accept": "application/json"
        })
    };

    return this.http.request("get", url_, options_).pipe(_observableMergeMap((response_ : any) => {
        return this.processGetAllPermissions(response_);
    })).pipe(_observableCatch((response_: any) => {
        if (response_ instanceof HttpResponseBase) {
            try {
                return this.processGetAllPermissions(<any>response_);
            } catch (e) {
                return <Observable<ClientDto>><any>_observableThrow(e);
            }
        } else
            return <Observable<ClientDto>><any>_observableThrow(response_);
    }));
}

protected processGetAllPermissions(response: HttpResponseBase): Observable<ClientDto> {
    const status = response.status;
    const responseBlob = 
        response instanceof HttpResponse ? response.body : 
        (<any>response).error instanceof Blob ? (<any>response).error : undefined;

    let _headers: any = {}; if (response.headers) { for (let key of response.headers.keys()) { _headers[key] = response.headers.get(key); }};
    if (status === 200) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = resultData200 ? ClientDto.fromJS(resultData200) : new ClientDto();
        console.log("Data:"+resultData200);

        return _observableOf(result200);
        }));
    } else if (status !== 200 && status !== 204) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
        }));
    }
    return _observableOf<ClientDto>(<any>null);
}
}

Client DTO

export interface IClientDto {
    abbrev: string | undefined;
    company: string | undefined;
    contact: string | undefined;
    contactDate: string | undefined;
    email: string | undefined;
    phone: string | undefined;
}

export class ClientDto {
    abbrev: string | undefined;
    company: string | undefined;
    contact: string | undefined;
    contactDate: string | undefined;
    email: string | undefined;
    phone: string | undefined;

    static fromJS(data: any): ClientDto {
        data = typeof data === 'object' ? data : {};
        const result = new ClientDto();
        result.init(data);
        return result;
    }

    constructor(data?: IClientDto) {
        if(data) {
            for (let property in data) {
                if(data.hasOwnProperty(property)) {
                    (<any>this)[property] = (<any>data)[property];
                }
            }
        }
    }

    init(data?: any) {
        if(data) {
            this.abbrev = data['abbrev'];
            this.company = data['company'];
            this.contact = data['contact'];
            this.contactDate = data['contactDate'];
            this.email = data['email'];
            this.phone = data['phone'];
        }
    }

    toJSON(data?: any) {
        data = typeof data === 'object' ? data : {};
        data['abbrev'] = this.abbrev;
        data['company'] = this.company;
        data['contact'] = this.contact;
        data['contactDate'] = this.contactDate;
        data['email'] = this.email;
        data['phone'] = this.phone;
        return data;
    }

    clone() {
        const json = this.toJSON();
        const result = new ClientDto();
        result.init(json);
        return result;
    }
}

Answer 1

change

import { Observable } from 'rxjs/Observable';

to

import { Observable } from 'rxjs';

I am against this practice

import { of as _observableOf, throwError as _observableThrow } from 'rxjs';

Especially if you want your code to be easily readable.

I stripped down your Service and got it to work. Start from here and add functionality.

import { HttpClient, HttpHeaders, HttpResponse, HttpResponseBase } from '@angular/common/http';
import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
import { catchError , mergeMap ,tap, map } from 'rxjs/operators';
import { of,  throwError  } from 'rxjs';

import { Observable } from 'rxjs';

export class ClientServiceProxy{
    private http: HttpClient;
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

    constructor(@Inject(HttpClient) http: HttpClient) {
        this.http = http;
        this.baseUrl = "https://jsonplaceholder.typicode.com/users";
    }

GetClientData(): Observable<any> {

   let url_ = this.baseUrl;

    let options_ = {};
    return this.http.request("get", url_, options_).pipe(
      tap(x => console.log(JSON.stringify(x)))
      );
}