Function is returning wrong return

user_13904063 0
Viewed 100

I have a problem with a function that returns wrong return instead of proper return.

Model:

export  module AbsModule {
    export class AbsModul{
        abs: string;
        state: boolean;
    }
  }

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { httpFactory } from '@angular/http/src/http_module';
import { AbsModule } from './abs-module';

@Injectable()
export class AbsService {
    private apiUrl: string = environment.apiUrl;
    constructor(private http: HttpClient) { }

    getAbs(): object {
           return  this.http.get(this.apiUrl + "/abs/download").subscribe(data => {
               const returnFromFunction = this.assigneAbs(data);
               console.log(returnFromFunction);
               console.log(data);
               return returnFromFunction;

            })
    }

    private assigneAbs(data: object) {
        return Object.assign(new AbsModule.AbsModul(), data);
    }

}

Calling function:

@Component({})
export class TestClass  {
constructor(
    private tests: AbsService
) {}
test(): void {
    console.log(this.tests.getAbs())
}}

After that I am receiving return from subscribe instead of returnFromFunction. When I am calling this function first I see the return from Subscriber from the Test function, then I see the console log from returnFromFunction and data. Return returnFromFunction does not work - it does not return this result.

angular typescript javascript
2 Answers

Right now you just return the observable that's returned by the http.get method. You could fix this by awaiting for the response to come and then returning the resolved and processed value.

async getAbs(): Promise<object> {
    const response = await this.http.get(this.apiUrl + "/abs/download").toPromise();
    return this.assigneAbs(response);
}

getAbs is an asynchronous method now so you will have to treat it appropriately in your test suite.

async test(): Promise<void> {
    console.log(await this.tests.getAbs());
}
user_81271290

The http.get(...) method returns an observable, and the subscribe method returns an object of type Subscription.

Now, the argument being passed to the subscribe method is actually a callback, a function that returns void. Hence, having such callback return an actual value, 'returnFromFunction' in your case, is meaningless.

An observable serves as a publisher notifying its observers of some new data, so a better approach would be to have the service expose an observable and have the component (as well as a tester) subscribe to it:

export class AbsService {
    private apiUrl: string = environment.apiUrl;
    constructor(private http: HttpClient) { }

    getAbs(): Observable<any> {
        return this.http.get(this.apiUrl + "/abs/download")
                        .map(data => this.assigneAbs(data));
    }

    private assigneAbs(data: object) {
        return Object.assign(new AbsModule.AbsModul(), data);
    }

}

export class TestClass {
    constructor(
        private tests: AbsService
    ) {}
    test(): void {
        this.tests.getAbs().subscribe(data => console.log(data));
    }
}
user_146151970
Related