Angular 6/7 - get entire http response status in service

Question

I have following service in Angular 7:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class UserService {

  private currentUserSubject: BehaviorSubject<any>;

  constructor(
    private http: HttpClient
  ) {
    this.currentUserSubject = new BehaviorSubject(null);
  }

  public get currentUserValue(): any {
    return this.currentUserSubject.value;
  }

  login(entity: any, inputUsername: any, inputPassword: any): any {

    const httpOptions = {
      headers: new HttpHeaders({
        username: inputUsername,
        password: inputPassword
      })
    };

    return this.http.get(entity.url, httpOptions)
    .pipe(map((user: Response) => {
      console.log(user);
      console.log(user.status);

      if (user) {
          this.currentUserSubject.next(user);
      }
      return user;
  }));
  }
}

I want to get the response status (200, 401, etc.). If I try to subscribe such as .pipe(map(.....)).subscribe(...), I get error that subscribe is not a function.

Also, I get only the 200 status responses in pipe(map()). I do not get responses with other status codes here.

I want to update the BehaviorSubject based on the received status.

How can I get all the responses and their status in the service?

I have gone though Angular 6 Get response headers with httpclient issue, but that does not apply here.

I added observe: 'response' to http headers, but it did not make any difference.

const httpOptions = {
      headers: new HttpHeaders({
        username: inputUsername,
        password: inputPassword,
        observe: 'response',
      }),
    };

So you are using {observe: 'response'} and it didnt work ? — Tony
– Tony, Commented May 21, 2019 at 3:52
@TonyNgo How can I add {observe: 'response'} in my httpOptions? — user5155835
– user5155835, Commented May 21, 2019 at 3:56

Sourav Dutta · Accepted Answer · 2019-05-21 05:24:23Z

1

This is how I did it :

this.http.get(this.url, { observe: 'response' })
  .subscribe(response => console.log(response.status));

Using Angular HttpClient and subscribing to the observable returned from http.get.

edited May 21, 2019 at 5:24

Sourav Dutta

1,3301 gold badge20 silver badges26 bronze badges

answered May 21, 2019 at 4:00

laxman kanhere

538 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5155835 Over a year ago

But I also need to pass my headers in the request. How can I add {observe: 'response'} in my httpOptions?

laxman kanhere Over a year ago

import { HttpHeaders } from '@angular/common/http'; So you will build up the headers as follows: let headers = new HttpHeaders(); headers = headers.set('Authorization', 'Basic xzeydyt==');

Seyed-Amir-Mehrizi · Accepted Answer · 2019-05-21 04:13:38Z

0

in Angular 7, the best way to add header to the request is, using the interceptor. in the interceptors, you can add header to the request and as a result, you can access to the protected API. here is the interceptor sample which adds header to the request :

       intercept(request: HttpRequest<any>, next: HttpHandler): 
            Observable<HttpEvent<any>> {
            let currentUser = this.authservice.currentUser;
         if (currentUser && currentUser.token) {
           request = request.clone({
           setHeaders: {
           Authorization: `Bearer ${currentUser.token}`
           }
          });
         }

         return next.handle(request)

answered May 21, 2019 at 4:13

Seyed-Amir-Mehrizi

7491 gold badge5 silver badges22 bronze badges

Comments

Akhi Akl · Accepted Answer · 2019-05-21 07:11:05Z

0

Tell HttpClient that you want the full response with the observe option:

const httpOptions:any = {
  headers: new HttpHeaders({
    username: inputUsername,
    password: inputPassword
  }),
  observe: 'response',
};
return this.http.get<any>(entity.url, httpOptions) //I put the type of the response data as `any` you can put the type of user
 .pipe(map((user: HttpResponse<any>) => {//same type as above statement
   console.log(user);
   console.log(user.status);

   if (user) {
      this.currentUserSubject.next(user);
   }
   return user;
 }));

Now HttpClient.get() returns an Observable of typed HttpResponse not just the JSON data.

edited May 21, 2019 at 7:11

answered May 21, 2019 at 4:19

Akhi Akl

3,9401 gold badge19 silver badges27 bronze badges

4 Comments

user5155835 Over a year ago

I get error: Types of property 'observe' are incompatible. Type 'string' is not assignable to type '"body"'.

Akhi Akl Over a year ago

can you put httpOptions type to any. I had edited it in the answer

user5155835 Over a year ago

adding any gives me error: Type 'Response' is missing the following properties from type 'ArrayBuffer': byteLength, slice, [Symbol.toStringTag]

Akhi Akl Over a year ago

Can you check the edited code? I added the pipe you put in the question

Collectives™ on Stack Overflow

Angular 6/7 - get entire http response status in service

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related