Return a response object from http get in Angular

Question

I'm new to angular and I've been trying to use http.get to get data from an API and assign it to a value in a component

This is the method which is used to get data

  public getByUserName(username:String):User{

     let res:CommonResponse;

     this.http.get<CommonResponse>(BASE_URL+'/'+username)
    .subscribe(  (response) => { res = response },
      error => this.errorHandler.handleError(error)
    )
    console.log("Response "+ res)
    return res.responseObj;
  }

When I print the result inside the subscribe function I get the result

But when I've tried to assign it to a local variable and return responseObj from res.

but the res object is undefined. Is there any other way to archive this functionality

Does this answer your question? How do I return the response from an asynchronous call? — jonrsharpe
– jonrsharpe, Commented Sep 13, 2020 at 11:26
I was looking for a way to do this with Observables without using promises — UserR
– UserR, Commented Sep 14, 2020 at 20:49

Sándor Jankovics · Accepted Answer · 2020-09-05 16:43:41Z

The reason you dont get any response is that all the HTTP method is async

You have two options to handle the problem

Use the observable provided by angular on itself

let res:ReplaySubject<CommonResponse>=new ReplaySubject(); 

public getByUserName(username:String):User{    
    this.http.get<CommonResponse>(BASE_URL+'/'+username)
    .subscribe(  (response) => { this.res.next(response) },
      error => this.errorHandler.handleError(error)
    )
  }

and then you can use the res REplaySubject to subscribe in your component.

Or if you are not really familiar with RxJs and Observables/ReplaySubject a simpler method is to convert the request to a promise and use await

public async getByUserName(username:String):User{
     let res:CommonResponse;    
     res= await this.http.get<CommonResponse>(BASE_URL+'/'+username).toPromise()
          .catch((error)=>{
              this.errorHandler.handleError(error)
                 })
      console.log("Response "+ res)
      return res.responseObj;
}

munzld · Accepted Answer · 2020-09-05 11:50:27Z

0

You should move your console/return statement inside the subscribe like this:

public getByUserName(username:String):User{
this.http.get<CommonResponse>(BASE_URL+'/'+username).subscribe(  (response) => {
  console.log("Response "+ res);
  return res.responseObj;
},
error => this.errorHandler.handleError(error)

);

Your function won't wait for the subscribe to complete because it's asynchronous. That's why it's undefined when you try to access responseObj outside the subscribe.

answered Sep 5, 2020 at 11:50

munzld

2794 silver badges9 bronze badges

Comments

Shivani · Accepted Answer · 2020-09-05 11:52:20Z

0

Ideally you should return res.responseObj within the subscribe method. Or you can try -

 public getByUserName(username:String):User{

 let res:CommonResponse;

 return this.http.get<CommonResponse>(BASE_URL+'/'+username)
.subscribe(  (response) => { res = response.responseObj },
  error => this.errorHandler.handleError(error)
)

}

answered Sep 5, 2020 at 11:52

Shivani

741 silver badge5 bronze badges

Collectives™ on Stack Overflow

Return a response object from http get in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related