16

So, I was trying to get the solution of this problem. But, somehow I am unable to do so, May be because of the lack of knowledge in angular 5. This is my service:

GetCurrentUserData(): Observable<ResponseData> {
    return this.http.get<ResponseData>(ApplicationURLS.GetCurrentUserInformation)
        .map(response => {
            return response;
        });
    //.catch(error => this.handleError(error));
}

This is my component:

public GetCurrentUserInformation(): any {

        return this.loginService.GetCurrentUserData().subscribe(data => { return data; });
    }

Here I am trying to access the data:

ngAfterViewInit() {
        debugger;                
        this.responseData = this.GetCurrentUserInformation();
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }

    }

When I check the this.responseData it is always returning this instead I want data: enter image description here

I just want to make a sync call so I can get the data immediately.

I also tried to use the do() in service but its returning do() is not a function.

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
Just code
  • 13,553
  • 10
  • 51
  • 93

7 Answers7

33

This can be simplified by using async/await 

public GetCurrentUserInformation(): Promise<any>{
    return this.loginService.GetCurrentUserData().toPromise()
}

ngAfterViewInit

async ngAfterViewInit() {    
        this.responseData = await this.GetCurrentUserInformation(); // ‍♂️ 
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
    }
Emanuele Bellini
  • 129
  • 2
  • 4
Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
  • @Emanuele Bellini : what is this "this.responseData.code != responseCodes.success" do await send any code field ? – SwapnilM Mar 12 '21 at 06:13
  • @SwapnilM No: await allows to get the result instead of the promise, like it was a synchronous call. So I can guess it was a field returned by GetCurrentUserData(), which is of type `any`. – Emanuele Bellini Mar 12 '21 at 11:09
8

Subscribe to GetCurrentUserData() the http call is async (every browser api call is async, because the javascript engine runs in a single thread (google for browser event loop for more, this is not an angular issue))

this.GetCurrentUserInformation().subscribe((data: ResponseData) => {
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
});
G.Vitelli
  • 1,229
  • 9
  • 18
5

Asynchronous functions cannot be called synchronously, because they are asynchronous.

subscribe generally shouldn't performed in methods that are expected to be chained. Even if it should, an observable and not a subscription should be returned from a method (a subscription can be additionally saved to be unsubscribed on destruction).

GetCurrentUserInformation method is redundant because it is just a wrapper for service call. The code can be refactored to:

ngAfterViewInit() {
    this.loginService.GetCurrentUserData().subscribe(data => {
        this.responseData = data;
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
    });
}
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Yup,+1 I was meant to complete the function first. But, yes as you pointed out and G.viteli helps me I am able to understand it now. – Just code Dec 02 '17 at 10:09
  • agreed but you can use async/await will look as it 's as asynchronous – Muhammed Albarmavi Jul 26 '19 at 15:09
  • This will not be a synchronous call and it is not for you to decide that the **public** method should be refactored into ngAfterViewInit because it is exposed to the outer world for a meaning (hopefully ;) ) – Youp Bernoulli Nov 18 '19 at 07:42
5

To make sure async calls are executed before processing response you may use Observable.forkJoin() from ReactiveX.

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

Observable.forkJoin(
    this.http.get('/links.json').map((response:Response) => response.json()),
    this.http.get('/bookmarks.json').map((response:Response) => response.json())
).subscribe(
    data => {
      this.links = data[0]
      this.bookmarks = data[1]
    },
    error => console.error(error)
);

subscribe() function's onNext handler will execute when all HTTP requests complete successfully.

vic-nik
  • 131
  • 1
  • 6
1

Use synchronous http request as below

var request = new XMLHttpRequest();
request.open('GET', "https://domain/api", false);  
request.send(null);
const response = JSON.parse(request.responseText);

Would not be able to take advantage of DI using HttpClient and hence should be used absolutely when required.

AdityaKapreShrewsburyBoston
  • 1,143
  • 2
  • 16
  • 37
1

The best way to make the call synchronous is to use complete method of subscribe.

source$.subscribe({ next: doSomething, error: doSomethingElse, complete: lol }).

if we subscribe something and want to do some operation after completing this subscribe then we can write the code in complete.

for detail reading https://rxjs.dev/deprecations/subscribe-arguments

Engineer
  • 300
  • 1
  • 9
0

there is no direct way to make a synchronous call, however you can do the following procedure (this code is written in angular 7).

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

export class SampleComponent implements OnInit {
  Request1result:Object;
  Request2result:Object;

  constructor(private http:HttpClient) { }

   ngOnInit() 
   {
    this.http.get("URL1").subscribe((res)=>{
      this.Request1result=res;
      this.after1(); // execution will move to next request only when first is done.
    });
   }
  after1()
  {
    this.http.get("URL2").subscribe((res)=>{
      this.Request2result=res;
      this.after2(); // execution will move to the rest of the code only when both the requests are done.
    });
  }
  after2()
    {
    // rest of the code.
    console.log(this.Request1result);
    console.log(this.Request2result);

    }

}
Faizan Yaseen
  • 1
  • 1